-moz-border-radius

Ü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.

  • Standardwert the concatenation of the initial values of its longhand properties:
    • border-top-left-radius: 0
    • border-top-right-radius: 0
    • border-bottom-right-radius: 0
    • border-bottom-left-radius: 0
  • Anwendbar auf all Elemente; but UA are not required to apply to table undinline-table Elemente when border-collapse ist collapse. The behavior on internal table Elemente ist undefined for the moment.
  • Vererbt Nein
  • Prozentwerte bezieht sich auf die Grösse der Border-Box
  • Medium visuell
  • Berechneter Wert wie die einzelnen Werte der Kurzschreibweise:
    • border-bottom-left-radius: two absolute length oder percentages
    • border-bottom-right-radius: two absolute length oder percentages
    • border-top-left-radius: two absolute length oder percentages
    • border-top-right-radius: two absolute length oder percentages
  • Animierbar wie die jeweiligen Kurzschreibweisen:
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

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

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden