Eigenschaft border-radius

Die Eigenschaft border-radius erzeugt abgerundete Ecken für Rahmen und Hintergrund. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen. Standardwert: 0. Ist eine Kurzform für die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

Selektor {
	border-radius: Wert;
}

Anzahl der Werte

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

Anzahl	Beschreibung
`1`	Für alle Ecken gleichzeitig.
`2`	Der erste Wert legt die Rundung für die obere rechte und untere linke Ecke fest, der zweite - für die obere linke und untere rechte.
`3`	Der erste Wert legt die Rundung für die obere linke Ecke fest, der zweite - gleichzeitig für die obere rechte und untere linke, und der dritte - für die untere rechte Ecke.
`4`	Der erste Wert legt die Rundung für die obere linke Ecke fest, der zweite - für die obere rechte, der dritte - für die untere rechte Ecke, und der vierte - für die untere linke Ecke.

Elliptische Rundung

Zwei Werte, durch Schrägstrich getrennt, legen eine elliptische Rundung fest. Der Wert vor dem Schrägstrich gibt die horizontale Rundung an, und die Werte nach dem Schrägstrich - die vertikale:

Selektor {
	border-style: horizontal / vertikal;
}

Wenn Rundungen für mehrere Ecken angegeben werden, dann werden vor dem Schrägstrich alle horizontalen Rundungen aufgelistet, und nach ihm - alle vertikalen.

Beispiel

Legen wir eine Rundung von 10px für alle Ecken fest:

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

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

Beispiel

Sehen wir uns an, wie Rundungen für einen Rahmen in Form von Punkten aussehen:

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

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

Beispiel

Legen wir eine Rundung von 10px für die Ecken einer Diagonale fest, und eine Rundung von 40px - für die Ecken der zweiten Diagonale:

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

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Beispiel

Legen wir eine Rundung von 10px für die obere linke Ecke fest, eine Rundung von 30px für die untere rechte Ecke, und Rundungen von 50px - für die Ecken der zweiten Diagonale:

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

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Beispiel

Legen wir verschiedene Rundungen für jede der Ecken fest:

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

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Beispiel

Lassen Sie uns eine elliptische Rundung erstellen, indem wir 20px für den horizontalen Teil der Rundung festlegen, und 40px - für den vertikalen:

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

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Beispiel

Jetzt legen wir verschiedene elliptische Rundungen für alle Ecken einzeln fest:

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

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Beispiel

Wenn man für einen quadratischen Block Rundungen setzt, die der Hälfte der Quadratseite entsprechen, erhält man einen Kreis:

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

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Beispiel

Wenn man eine Rundung setzt, die größer ist als die Seite des Quadrats, erhält man trotzdem einen Kreis:

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

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Beispiel

Einen Kreis kann man auch erhalten, wenn man border-radius auf 50% setzt (der Vorteil dabei ist, dass bei Änderung der Quadratgröße die Rundung nicht geändert werden muss):

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

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Beispiel

Wenn man border-radius in Prozent für ein Rechteck setzt, erhält man eine elliptische Rundung. Wenn die Breite auf 400px gesetzt ist, die Höhe auf 200px, und border-radius auf 10%, dann ist es dasselbe, als wäre 40px/20px geschrieben:

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

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Beispiel

Setzen wir den Wert border-radius auf 50% für ein Rechteck - es entsteht eine Ellipse:

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

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Beispiel

Die Eigenschaft border-radius rundet nicht nur die Ecken des Rahmens ab, sondern auch die des Hintergrunds:

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

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Siehe auch

die Eigenschaft border,
die eine Kurzform für den Rahmen ist