Eingaben
So lesen Sie border-radius
Vier Zahlen im Uhrzeigersinn
border-radius: 12px 0 24px 8px steht für die Ecken oben links, oben rechts, unten rechts und unten links. Die Reihenfolge ist fest und beginnt oben links. Sind alle vier gleich, schreiben Sie eine Zahl.
Zwei und drei Zahlen
Kurzformen gehen auch. Zwei Zahlen bedeuten „oben links mit unten rechts“ und „oben rechts mit unten links“. Drei stehen für oben links, dann das diagonale Paar, dann unten rechts. In der Praxis lesen sich eine Zahl oder alle vier leichter.
Prozent sind nicht dasselbe wie Pixel
Prozent werden waagerecht und senkrecht getrennt gemessen. 50% ergibt deshalb bei einem Quadrat einen Kreis, bei einem Rechteck von 320 × 200 aber eine Ellipse: 160 Pixel waagerecht, 100 senkrecht. Pixel verhalten sich nicht so – sie sind in beide Richtungen gleich.
Wann der Browser die Radien selbst verkleinert
Sind zwei Radien einer Seite zusammen länger als die Seite, berechnet der Browser einen Faktor und verkleinert damit alle vier Ecken, nicht nur eine. Deshalb sieht eine Karte mit Radius 200 bei einer Höhe von 200 anders aus als erwartet: Die Proportionen bleiben, aber die Zahlen sind nicht mehr die, die Sie geschrieben haben.
Pillenform
Sobald der Radius die Hälfte der kürzeren Seite erreicht, wird die Ecke zum Halbkreis und verändert sich nicht mehr. Daher der bekannte Trick border-radius: 999px für einen Pillen-Button: Jede zu große Zahl ergibt dasselbe.
Häufige Fragen zu abgerundeten Ecken
Wie erstelle ich einen runden Avatar?
Ein quadratisches Element und border-radius: 50%. Ein nicht quadratisches ergibt eine Ellipse – gleichen Sie zuerst die Seiten an oder ergänzen Sie aspect-ratio: 1.
Warum ist die Abrundung beim Bild darin nicht zu sehen?
Ein Kindelement erbt die Form des Elternelements nicht. Geben Sie dem Bild einen eigenen Radius oder dem Elternelement overflow: hidden.
999px oder 50% für einen Button?
999px. Prozent machen die Ecken bei einem breiten Button elliptisch, und die Form verzieht sich. Einen zu großen Pixelradius kürzt der Browser dagegen auf einen Halbkreis.
Kann der Radius waagerecht und senkrecht verschieden sein?
Ja, mit einem Schrägstrich: border-radius: 40px / 20px – der erste Wert gilt waagerecht, der zweite senkrecht. Diese Seite erstellt die einfache Form ohne Schrägstrich.
Abrundung mit Rahmen und Schatten
Beide folgen der Form automatisch: Der Rahmen läuft an der abgerundeten Kante entlang, der Schatten ebenso. Nichts muss angeglichen werden.