Eigenschaft border-style

Die Eigenschaft border-style legt den Stil des Rahmens für alle Seiten gleichzeitig oder separat für jede Seite fest. Es ist eine Kurzschreibweise für die folgenden Eigenschaften: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntax

cssSelektor {
  border-style: Wert;
}

Werte

Wert	Beschreibung
`solid`	Durchgezogene Linie.
`dotted`	Gepunkteter Rahmen.
`dashed`	Gestrichelter Rahmen.
`ridge`	Rahmen als erhabene Linie.
`double`	Rahmen als Doppellinie. Um den Effekt zu sehen, muss die Rahmenstärke mindestens `3px` betragen.
`groove`	Eingesenkter Rahmen.
`inset`	Eingedrückter Rahmen.
`outset`	Erhabener Rahmen.
`none`	Kein Rahmen.

Standardwert: none.

Anzahl der Werte

Die Eigenschaft kann 1, 2, 3 oder 4 Werte annehmen, die durch Leerzeichen getrennt angegeben werden:

Anzahl	Beschreibung
`1`	Typ für alle Seiten gleichzeitig.
`2`	Erster Wert für oben und unten, zweiter - für linke und rechte Rahmen.
`3`	Erster Wert für oben, zweiter - für linke und rechte Rahmen, dritter - für unten.
`4`	Erster Wert für den oberen Rahmen, zweiter - für den rechten, dritter - für den unteren, vierter - für den linken Rahmen.

Beispiel . Wert solid

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert dotted

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert dashed

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert ridge

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert double

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert groove

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert inset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel . Wert outset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel

In diesem Beispiel sind verschiedene Rahmenstile für verschiedene Seiten des Elements festgelegt:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel

Jetzt sind für verschiedene Seiten des Elements auch verschiedene Rahmenstärken und Farben festgelegt:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Beispiel

Für den oberen und unteren Rahmen ist der Typ solid festgelegt, für den rechten und linken - dotted:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Siehe auch

Eigenschaft border-color,
die die Farbe des Rahmens festlegt
Eigenschaft border-width,
die die Stärke des Rahmens festlegt
Eigenschaft border,
die eine Kurzschreibweise für den Rahmen ist