mozilla
Ihre Suchergebnisse

    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

    Mitwirkende an dieser Seite: Michael2402, fscholz, Yuichiro, Jürgen Jeka, SJW, Matthias.Apsel
    Zuletzt aktualisiert von: SJW,
    Seitenleiste ausblenden