Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Ü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:
Animierbarwie die jeweiligen Kurzschreibweisen:
  • border-top-left-radius: ja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert.
  • border-top-right-radius: ja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert.
  • border-bottom-right-radius: ja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert.
  • border-bottom-left-radius: ja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert.
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

Browser ab Version Unterstützung von Prozentwerte 4 Werte für 4 Ecken Elliptische Rahmen
CSS3 Standard border-radius Ja Ja Ja
Internet Explorer 9.0 border-radius Ja Ja Ja
Firefox (Gecko) 1.0 (1.0) -moz-border-radius Ja, aber Ja 3.5 (1.9.1)
4.0 (2.0)

-moz-border-radius
     border-radius

 Ja
Opera 10.5 border-radius Ja Ja Ja
Chrome |
Safari | WebKit		 3.0 | 0.2 | 522 -webkit-border-radius Nein Nein Ja (Unterschiede siehe unten)
5.0 | 4.0 | 532.5 border-radius Nein Ja Ja

Unterschiede zwischen -moz-border-radius und -webkit-border-radius

  • <Prozentzahlen>
    • werden nicht von WebKit unterstützt und sind fehlerhaft in Opera 10.x
    • sind in Versionen vor Gecko 2.0 (Firefox 4.0) in einer nicht standardisierten Weise implementiert.
  • Ältere Versionen von Safari und Chrome (vor WebKit 532.5)
    • unterstützen nur einen Wert für alle 4 Ecken. Für unterschiedliche Radien müssen Eigenschaften mit Langschreibweisen verwendet werden.
    • unterstützen die Slash-Notation nicht. Wenn zwei Werte festgelegt werden, wird ein elliptischer Rahmen für alle vier Ecken gezeichnet. 
      /* Alle Notationen sind gleichbedeutend: */

-webkit-border-radius:  40px 10px;
   -moz-border-radius:  40px/10px;
        border-radius:  40px/10px;

Spezifikation

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: iGadget, Sebastianz, Prinz_Rana, fscholz, SJW, Matthias.Apsel, Yuichiro, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: iGadget,