Randradius - CSS-Tricks | CSS-Almanach 2025

Sie können jedem Element "abgerundete Ecken" geben, indem Sie ein border-radiusdurch CSS anwenden . Sie werden es nur bemerken, wenn es sich um eine Farbänderung handelt. Wenn das Element beispielsweise eine andere Hintergrundfarbe oder einen anderen Rand als das Element hat, ist es vorbei. Einfache Beispiele:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Es ist wirklich nicht necesssary mehr, aber für die absolut bestmögliche Browser - Unterstützung, können Sie das Präfix mit -webkit-und -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Beachten Sie die Reihenfolge dieser Eigenschaften: Die Herstellerpräfixe werden zuerst aufgelistet und die nicht vorangestellte "spec" -Version wird zuletzt aufgeführt. Dies ist der richtige Weg. Der Randradius ist ein besonders gutes Beispiel dafür, warum wir das so machen. In einer etwas komplizierteren Version der Verwendung border-radius(bei der Sie zwei Werte anstelle von einem übergeben) würde das ältere -webkit-Herstellerpräfix etwas völlig anderes tun als die "Spezifikations" -Version. Wenn wir also blindlings dieselben Werte in alle drei Eigenschaften kopieren / einfügen, können wir unterschiedliche Ergebnisse browserübergreifend sehen. Erfahren Sie mehr über dieses Szenario. Um langfristig die bestmögliche Konsistenz zu erzielen, ist es am besten, die letzte Version der Spezifikation aufzulisten.

Es ist heutzutage ziemlich realistisch, Präfixe zu löschen und nur den Randradius zu verwenden, wie hier beschrieben.

Wenn das Element einen Bildhintergrund hat, wird es natürlich an der abgerundeten Ecke abgeschnitten:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Manchmal kann man ein background-color„Leck“ außerhalb einer Grenze sehen, wenn border-radiuses vorhanden ist. (sehen). Um dies zu verhindern, verwenden Sie einen Hintergrundclip:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Mit nur einem Wert border-radiuswird an allen vier Ecken eines Elements gleich. Das muss aber nicht der Fall sein. Sie können jede Ecke separat angeben, wenn Sie möchten:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Sie können auch zwei oder drei Werte angeben. MDN erklärt es gut:

Wenn ein Wert festgelegt ist, gilt dieser Radius für alle 4 Ecken .
Wenn zwei Werte festgelegt sind, gilt der erste für top-leftund bottom-rightEcke, der zweite gilt für top-rightund bottom-leftEcke.
Vier Werte gelten für die top-left, top-right, bottom-right, bottom-leftEcke in dieser Reihenfolge.
Drei Werte: Der zweite Wert gilt auch für top-rightund bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Sie können auch die Radien angeben, um die die Ecke abgerundet ist. Mit anderen Worten, die Rundung muss nicht perfekt kreisförmig sein, sondern kann elliptisch sein. Dies erfolgt mit einem Schrägstrich („/“) zwischen zwei Werten.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Hinweis: Firefox unterstützt nur elliptische Ränder in WebKit-Browsern ab 3.5 und älter (z. B. Safari 4) und behandelt "40px 10px" fälschlicherweise als "40px / 10px".

Sie können den Wert border-radiusin Prozent angeben . Dies ist besonders nützlich, wenn Sie eine Kreis- oder Elipsenform erstellen möchten. Sie kann jedoch jederzeit verwendet werden, wenn der Rahmenradius direkt mit der Breite der Elemente korreliert werden soll.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Hinweis: In Safari werden Prozentwerte für den Randradius nur in 5.1+ unterstützt. In Opera nur in 11.5+ unterstützt.

Hier ist jede einzelne Eigenschaft mit Herstellerpräfixen:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Hinweis: Jeder dieser Werte kann auch einen durch Leerzeichen getrennten Wert haben, z. B. "5px 10px", der sich wie ein durch Schrägstriche getrennter Wert in Kurzform (horizontaler Radius (Leerzeichen), vertikaler Radius) verhält.

Ressourcen

Schnelles Werkzeug zum Generieren von Randradiuscode
Mozilla Docs
Auf der Suche nach dem perfekten Radius
Müssen wir dem Randradius noch ein Präfix voranstellen?

Hier ist eine kleine Sache, um mit den verschiedenen Eigenschaften und Werten zu spielen:

Siehe den Stift Alle Randradien 'von Chris Coyier (@chriscoyier) auf CodePen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.