Granica - CSS-trikovi

borderNekretnina je stenogram sintakse u CSS koji prihvaća višestruke vrijednosti za crtanje linija oko elementa se primjenjuje.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Vrijednosti

borderObjekt prima jedno ili više od sljedećih vrijednosti u kombinaciji:

border: || || 

• border-width: Određuje debljinu obruba.
  • : Numerička vrijednost mjerena u px, em, rem, vhte vwjedinice.
  • thin: Ekvivalent od 1px
  • medium: Ekvivalent od 3px
  • thick: Ekvivalent od 5px
• border-style: Određuje vrstu crte povučene oko elementa, uključujući:
  • solid: Puna, neprekidna linija.
  • none (zadano): Nije povučena crta.
  • hidden: Crta je povučena, ali nije vidljiva. ovo može biti korisno za dodavanje malo dodatne širine elementu bez prikazivanja obruba.
  • dashed: Redak koji se sastoji od crtica.
  • dotted: Redak koji se sastoji od točaka.
  • double: Oko elementa povučene su dvije crte.
  • groove: Dodaje koso na temelju vrijednosti boje na način da element izgleda pritisnut u dokument.
  • ridge: Slično groove, ali preokreće vrijednosti boja na način da se čini da je element povišen.
  • inset: Dodaje podijeljeni ton crti zbog koje element izgleda lagano pritisnut.
  • outset: Slično inset, ali preokreće boje na način da element izgleda lagano podignut.
• color: Određuje boju obruba i prihvaća ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Krom	Safari	Firefox	Opera	IE	Android	iOS
Bilo koji	Bilo koji	Bilo koji	3,5+	4+	Bilo koji	Bilo koji

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####