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

Selektor {
	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

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

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

Beispiel . Wert dotted

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

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

Beispiel . Wert dashed

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

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

Beispiel . Wert ridge

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

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

Beispiel . Wert double

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

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

Beispiel . Wert groove

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

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

Beispiel . Wert inset

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

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

Beispiel . Wert outset

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

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

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

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

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

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

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

#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