Grenze - CSS-Tricks

Die borderEigenschaft ist eine Kurzschrift-Syntax in CSS, die mehrere Werte zum Zeichnen einer Linie um das Element akzeptiert, auf das sie angewendet wird.

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

Werte

Die borderEigenschaft akzeptiert einen oder mehrere der folgenden Werte in Kombination:

border: || || 

• border-width: Gibt die Dicke des Rahmens an.
  • : Ein in der gemessenen numerischen Wert px, em, rem, vhund vwEinheiten.
  • thin: Das Äquivalent von 1px
  • medium: Das Äquivalent von 3px
  • thick: Das Äquivalent von 5px
• border-style: Gibt den Linientyp an, der um das Element gezogen wird, einschließlich:
  • solid: Eine durchgezogene Linie.
  • none (Standard): Es wird keine Linie gezeichnet.
  • hidden: Eine Linie wird gezeichnet, ist aber nicht sichtbar. Dies kann nützlich sein, um einem Element eine zusätzliche Breite hinzuzufügen, ohne einen Rand anzuzeigen.
  • dashed: Eine Linie, die aus Bindestrichen besteht.
  • dotted: Eine Linie, die aus Punkten besteht.
  • double: Um das Element werden zwei Linien gezogen.
  • groove: Fügt eine Abschrägung basierend auf dem Farbwert so hinzu, dass das Element in das Dokument gedrückt erscheint.
  • ridge: Ähnlich wie groove, kehrt jedoch die Farbwerte so um, dass das Element erhöht erscheint.
  • inset: Fügt der Linie einen geteilten Ton hinzu, der das Element leicht niedergedrückt erscheinen lässt.
  • outset: Ähnlich wie inset, kehrt jedoch die Farben so um, dass das Element leicht erhöht erscheint.
• color: Gibt die Farbe des Rahmens an und akzeptiert ,, , , , , 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	Feuerfuchs	Oper	IE	Android	iOS
Irgendein	Irgendein	Irgendein	3.5+	4+	Irgendein	Irgendein

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