CSS/Eigenschaften/border-radius

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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:

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

Weblinks