CSS/Eigenschaften/border-radius

Die Eigenschaft border-radius bestimmt den Radius, mit dem die Ecken eines Elements abgerundet werden. Sie müsste eigentlich box-radius heißen, da es nicht nur die durch border festgelegte Randlinie, sondern auch die Füllung der Box, sowie eine eventuelle outline oder einen box-shadow abrundet.
border-radius ist die Kurzform für die Eigenschaften:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius und
• border-bottom-left-radius.

Erlaubte Werte

1 - 4 Längenangaben, optional ergänzt durch einen Schrägstrich / und 1 - 4 weitere Längenangaben für die zweite Radiusangabe, die für elliptische Eckenabrundungen erforderlich sind.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzeleigenschaften

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

Verwendung von border-radius ansehen …

#rund1 {
	border-radius: 1em;
}

#rund2 {
	border-radius: 1em;
	border: none;
	background: red;
}

#rund3 {
	border-radius: 1em / 2em;
}

#rund4 {
	border-radius: 20%;
}

#rund5 {
	border-radius: 20% / 40%;
}

#rund6 {
	border-radius: 50%;
	aspect-ratio: 1;
	outline: medium solid yellow;
	box-shadow: 0px 0px 0px 5px black;
}

Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:

• Box 1 erhält einen Radius von 1em
• Box 2 hat den gleichen Radius, aber durch border: none; keine Randlinie, dafür aber einen roten Hintergrund, der entlang des Radius abgeschnitten wird.
• Box 3 erhält als Radius ein Wertepaar border-radius: 1em/2em; Der erste Radiuswert bezieht sich auf die horizontale Achse, der zweite Wert auf die vertikale Achse, dadurch ist die Abrundung elliptisch.
• Box 4 erhält als Radius eine prozentuale Angabe border-radius: 20%;. Die Abrundung ist ebenfalls elliptisch, weil der Prozentwert für den horizontaler und vertikaler Radius getrennt aus Breite und Höhe der Box bestimmt wird.
• Box 5 erhält als Radius ein Wertepaar border-radius: 20% / 40%;
  . Diese Ecken erscheinen wieder rund, weil die Box in etwa ein Seitenverhältnis von 2:1 hat und die Radiusangaben dies ausgleichen. Eine prozentuale Radiusangabe, die sich nur auf Breite oder Höhe bezieht, ist nicht möglich. Vermeiden Sie Prozentangaben, wenn Sie kreisförmige Abrundungen wünschen!
• Box 6 ist kreisrund, da sie durch Angabe von aspect-ratio:1 auf Quadratform gebracht wurde und als Radius 50% der Höhe und Breite festgelegt wurde.

Beachten Sie: Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen

Weblinks

• Spezifikation (W3C): CSS3 Curve Radii: the ‘border-radius’ properties
• MDN: border-radius
• bittersmann.de: Übersicht verschiedener Angaben für border-radius
• simurai: BonBon Sweet CSS3 Buttons Buttons mit sehr unterschiedlichen geometrischen Formen
  Leider verwendet der Autor für Buttons nicht das dafür vorgesehene button-Element.