Granica - CSS-Tricks

borderNieruchomość jest składnia skrótowym w CSS, który akceptuje wiele wartości do rysowania linii wokół elementu jest zaaplikowana.

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

Wartości

borderWłaściwość przyjmuje jeden lub więcej z następujących wartości w kombinacji:

border: || || 

• border-width: Określa grubość obramowania.
  • : Wartość liczbowa mierzona w px, em, rem, vhi vwjednostkami.
  • thin: Odpowiednik 1px
  • medium: Odpowiednik 3px
  • thick: Odpowiednik 5px
• border-style: Określa typ linii rysowanej wokół elementu, w tym:
  • solid: Linia ciągła.
  • none (domyślnie): Żadna linia nie jest rysowana.
  • hidden: Linia jest rysowana, ale niewidoczna. może to być przydatne przy dodawaniu dodatkowej szerokości do elementu bez wyświetlania obramowania.
  • dashed: Linia składająca się z myślników.
  • dotted: Linia składająca się z kropek.
  • double: Wokół elementu rysowane są dwie linie.
  • groove: Dodaje fazę na podstawie wartości koloru w taki sposób, aby element wyglądał jak wciśnięty do dokumentu.
  • ridge: Podobny do groove, ale odwraca wartości kolorów w taki sposób, że element wygląda na podniesiony.
  • inset: Dodaje podzielony ton do linii, który sprawia, że ​​element wygląda na lekko obniżony.
  • outset: Podobny do inset, ale odwraca kolory w taki sposób, że element wygląda na lekko podniesiony.
• color: Określa kolor obramowania i akceptuje ,, , , , , 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.

Chrom	Safari	Firefox	Opera	TO ZNACZY	Android	iOS
Każdy	Każdy	Każdy	3.5+	4+	Każdy	Każdy

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