Übersicht

Die Eigenschaft border-radius kann verwendet werden, um Rahmen mit abgerundeten Ecken zu versehen. Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.

border-radius ist die Kurzform für die für Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe der Border-Box
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

wobei
<length-percentage> = <length> | <percentage>

bzw. border-radius: [ <Länge> | <Prozentzahl> ]{1,4}                [ / [ <Länge> | <Prozentzahl> ]{1,4} ]?

Werte

Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("/") können vier weitere Angaben folgen.

<Länge>
Siehe <length> für mögliche Einheiten.
<Prozentzahl>
Ab Gecko 2.0 (Firefox 4.0):
Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.
In vorherigen Gecko- & Firefox-Versionen:
Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.
Ein Wert
Gilt für alle vier Ecken.
Zwei Werte
Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.
Drei Werte
Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.
Vier Werte
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.
Slash ("/") Schreibweise
Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.

Beispiel zur Slash-Notation:

-moz-border-radius: 1em/5em;
     border-radius: 1em/5em;

/* ist gleichbedeutend zu: */

-moz-border-radius-topleft:      1em 5em;
-moz-border-radius-topright:     1em 5em;
-moz-border-radius-bottomright:  1em 5em;
-moz-border-radius-bottomleft:   1em 5em;
     border-top-left-radius:     1em 5em;
     border-top-right-radius:    1em 5em;
     border-bottom-right-radius: 1em 5em;
     border-bottom-left-radius:  1em 5em;
-moz-border-radius: 4px 3px 6px / 2px 4px;
     border-radius: 4px 3px 6px / 2px 4px;

/* ist gleichbedeutend zu: */

-moz-border-radius-topleft:      4px 2px;
-moz-border-radius-topright:     3px 4px;
-moz-border-radius-bottomright:  6px 2px;
-moz-border-radius-bottomleft:   3px 4px;
     border-top-left-radius:     4px 2px;
     border-top-right-radius:    3px 4px;
     border-bottom-right-radius: 6px 2px;
     border-bottom-left-radius:  3px 4px;
Hinweis: Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.

Beispiele

border: solid 10px;
 
  /* Der Rahmen ergibt ein 'D' */
  -moz-border-radius: 0 50px 50px 0;
       border-radius: 0 50px 50px 0;
    border: groove 1em red;
 
           -moz-border-radius: 2em;  
        -webkit-border-radius: 2em;
                border-radius: 2em;
     
           background: gold;
           border: ridge gold;
 
             -moz-border-radius: 13em/3em;  
          -webkit-border-radius: 13em 3em;
                  border-radius: 13em/3em; 
    background: gold;
 
       -moz-border-radius: 40px 10px;  
            border-radius: 40px 10px; 
background: black;
color: gray;
border-radius: 50%;

 

Hinweise

  • Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe Bug 382721.
  • border-radius wird nicht auf Tabellen angewendet, wenn border-collapse auf collapse gesetzt ist.
  • Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Hinweise To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.
Keine Unterstützung 1 — 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5
Hinweise
Vollständige Unterstützung 10.5
Hinweise
Hinweise In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.
Safari Vollständige Unterstützung 5
Hinweise
Vollständige Unterstützung 5
Hinweise
Hinweise Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 2
Mit Präfix
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Vollständige Unterstützung Safari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
Elliptical bordersChrome Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
WebView Android ? Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Keine Unterstützung NeinSafari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
4 values for 4 cornersChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung JaIE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 5WebView Android ? Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Keine Unterstützung NeinSafari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
PercentagesChrome Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
IE Vollständige Unterstützung JaOpera Vollständige Unterstützung 11.5
Hinweise
Vollständige Unterstützung 11.5
Hinweise
Hinweise The implementation of <percentage> values was buggy in Opera prior to 11.50.
Safari Vollständige Unterstützung 5.1
Hinweise
Vollständige Unterstützung 5.1
Hinweise
Hinweise <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
WebView Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Spezifikation

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Zuletzt aktualisiert von: SJW,