border

Die border-Eigenschaft ist eine Kurzschreibweise in CSS, die mehrere Werte akzeptiert, um eine Linie um das Element zu ziehen, auf das sie angewendet wird.

.belement{
  border: 3px solid red;
  width: 200px;
  aspect-ratio: 1;
}

Syntax

border: <line-width> || <line-style> || <color>

Werte

Die border-Eigenschaft akzeptiert eine oder mehrere der folgenden Werte in Kombination

• border-width: Gibt die Dicke des Randes an.
  • : Ein numerischer Wert, gemessen in px, em, rem, vh und vw Einheiten.
  • thin: Das Äquivalent von 1px
  • medium: Das Äquivalent von 3px
  • thick: Das Äquivalent von 5px
• border-style: Gibt die Art der Linie an, die um das Element gezogen wird, einschließlich
  • solid: Eine durchgezogene, kontinuierliche 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 etwas mehr Breite zu verleihen, ohne einen Rand anzuzeigen.
  • dashed: Eine Linie, die aus Strichen besteht.
  • dotted: Eine Linie, die aus Punkten besteht.
  • double: Zwei Linien werden um das Element gezeichnet.
  • groove: Fügt eine abgeschrägte Kante hinzu, die auf dem Farbwert basiert und das Element so aussehen lässt, als wäre es in das Dokument eingedrückt.
  • ridge: Ähnlich wie groove, kehrt aber die Farbwerte um, sodass das Element erhaben erscheint.
  • inset: Fügt der Linie einen Split-Tone hinzu, der das Element leicht vertieft erscheinen lässt.
  • outset: Ähnlich wie inset, kehrt aber die Farben um, sodass das Element leicht erhaben erscheint.
• border-color: Gibt die Farbe des Randes an und akzeptiert alle gültigen Farbwerte.

Puh, das sind viele Werte für eine einzige kleine Eigenschaft! Hier ist eine Demo, die die Unterschiede zwischen all diesen Stilwerten veranschaulicht

Bestandteileigenschaften

Die border-Eigenschaft ist eine Kurzschreibweise für die folgenden randbezogenen Eigenschaften

Physische Eigenschaften	Logische Eigenschaften
border-top	border-block-start
border-bottom	border-block-end
border-left	border-inline-start
border-right	border-inline-end

Also, das

.element {
  border: 3px solid #f8a100;
}

…ist dasselbe wie

.element {
  border-top: 3px solid #f8a100;
  border-right: 3px solid #f8a100;
  border-bottom: 3px solid #f8a100;
  border-left: 3px solid #f8a100;
}

…oder das logische Äquivalent

.element {
  border-block-start: 3px solid #f8a100;
  border-inline-end: 3px solid #f8a100;
  border-block-end: 3px solid #f8a100;
  border-inline-start: 3px solid #f8a100;
}

Wir können Ränder nur in Block- oder Inline-Richtung deklarieren, da einige dieser logischen Eigenschaften ihre eigenen Kurzschreibweisen haben

.element {
  /* The top (start) and bottom (end) borders */
  border-block: 3px solid #f8a100;
  /* The left (start) and right (end) borders */
  border-inline: 3px solid #f8a100;
}

Browser-Unterstützung

Sie können sich auf eine ausgezeichnete Unterstützung für die border-Eigenschaft in allen Browsern verlassen.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	Ja	3.5+	4+	Ja	Ja

Weitere Informationen

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

Verwandt