Frontieră - CSS-Tricks

borderProprietatea este o sintaxă prescurtare în CSS care acceptă mai multe valori pentru a trasa o linie in jurul elementului este aplicat.

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

Valori

borderProprietatea acceptă una sau mai multe dintre următoarele valori în combinație:

border: || || 

• border-width: Specifică grosimea chenarului.
  • : O valoare numerică măsurată în px, em, rem, vhși vwunități.
  • thin: Echivalentul lui 1px
  • medium: Echivalentul lui 3px
  • thick: Echivalentul lui 5px
• border-style: Specifică tipul de linie trasată în jurul elementului, inclusiv:
  • solid: O linie continuă și continuă.
  • none (implicit): nu este trasată nicio linie.
  • hidden: Se trasează o linie, dar nu este vizibilă. acest lucru poate fi la îndemână pentru adăugarea unei lățimi suplimentare unui element fără a afișa un chenar.
  • dashed: O linie care constă din liniuțe.
  • dotted: O linie care constă din puncte.
  • double: Două linii sunt trasate în jurul elementului.
  • groove: Adaugă o teșire bazată pe valoarea culorii într-un mod care face ca elementul să apară apăsat în document.
  • ridge: Similar cu groove, dar inversează valorile culorilor într-un mod care face ca elementul să pară ridicat.
  • inset: Adaugă un ton împărțit liniei care face ca elementul să pară ușor deprimat.
  • outset: Similar cu inset, dar inversează culorile într-un mod care face ca elementul să pară ușor ridicat.
• color: Specifică culoarea chenarului și acceptă ,, , , , , 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.

Crom	Safari	Firefox	Operă	IE	Android	iOS
Orice	Orice	Orice	3.5+	4+	Orice	Orice

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. #####