border-radius rundet die Ecken einer Box. Aus derselben Eigenschaft entsteht mit einem hohen Wert auch der Kreis.
- border-radius (Rundungen)
Eigenschaft, die die Ecken einer Box abrundet.
Beispiel: „Ein border-radius wirkt auch ohne sichtbaren Rahmen, etwa auf den Hintergrund.“
Von der Ecke zum Kreis
border-radius: 8px; /* alle vier Ecken */
border-radius: 8px 8px 0 0; /* oben rund, unten eckig */
border-radius: 50%; /* Kreis bei quadratischer Box */Bei mehreren Werten beginnt die Zählung oben links und läuft im Uhrzeigersinn. Ein Wert von 50 Prozent macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse.
Verschachtelte Rundungen
Liegt eine runde Box in einer anderen, muss die innere einen kleineren Radius haben, sonst wirkt der Abstand an den Ecken zu groß. Die Faustregel: innerer Radius gleich äußerer minus Innenabstand.