CSS/Eigenschaften/border

Die Eigenschaft border ist die Kurzschreibform für die Werte border-width, border-style und border-color. Sie bestimmt alle 4 Rahmen eines Elements.

Erlaubte Werte

1 - 3 Angaben zu Rahmendicke, -stil und -farbe

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzeleigenschaften

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

Randlinien ansehen …

.one {
	border: medium solid red;
}

.two {
	border: thick dotted red;
}

.three {
	border: 1em groove red;
}

.four {
	border: 1em ridge red;
}

.five {
	border: 1em inset red;
}

.six {
	border: 1em outset red;
}

.seven {
	border-width: 1em;
	border-style: solid;
	border-color: red blue yellow green;
}

.eight {
	border: 1em double red;
	border-radius: 1em;
}

.nine {
	border: 1em dashed red;
	border-radius: 50%;
}

.ten {
	border: .5em solid red;
	outline: .5em solid blue;
	box-shadow: 0 0 0 .5em yellow inset;
}

Das Beispiel enthält 10 div-Elemente, die über ihre Selektoren unterschiedliche Rahmen erhalten:

• Box 1 erhält einen medium breiten festen (solid) roten Rahmen.
• Box 2 hat nur einen breiten (thick), gepunkteten Rahmen (dotted).
• Box 3 -6 erhalten mit den Schlüsselwörtern groove, ridge, inset und outset einen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.
• Box 7 zeigt, wie Sie über mehrfache Angaben der Einzeleigenschaft border-color jede Seite des Rahmens in der gewünschten Farbe darstellen können.
• Box 8 erhält mit double einen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.
• Box 9 hat eine gestrichelte Linie (dashed) und einen border-radius von 50%.
• Box 10 ist ein Beispiel für mehrere Konturlinien. Dabei ist nur der rote Streifen ein Rand. Der blaue Streifen besteht aus einer Außenlinie outline, die sich außerhalb der border-box befindet (und deshalb z. B. nicht anklickbar ist). Der gelbe Rand ist ein Innenschatten, der mit box-shadow realisiert wurde.

Beachten Sie:

• Es ist durch die Angabe von border nicht möglich, den einzelnen Seiten verschiedene Rahmenarten zuzuweisen.
• Da die Voreinstellung von border-style none ist, sollte im Allgemeinen mindestens eine Angabe zu border-style erfolgen.

Empfehlung: Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge border: width style color;.

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen
• outline - anders als eine mit border gezeichnete Randlinie ist eine Außenlinie außerhalb des Elements

Weblinks

• Spezifikation (W3C): border
• MDN: border