Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-top-left-radius

Übersicht

Die border-top-left-radius Eigenschaft die Abrundung der oberen, linken Ecke eines Elements fest.

Vor Gecko 2.0 (Firefox 4.0) war diese Eigenschaft als -moz-border-radius-topleft bekannt. Diese Eigenschaft wird weiterhin übergangsweise unterstützt.

Weitere Informationen sind unter border-radius verfügbar.

Initialwert0
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 Wertzwei absolute length oder percentage
Animierbarja, 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), and these calc() functions have each half interpolated as real numbers.
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: [ <length> | <percentage> ]{1,2}
-moz-border-radius-topleft: [ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?
     border-top-left-radius:[ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?

Werte

Seit Gecko 1.9.1 (Firefox 3.5) wird ein zweiter, optionaler Wert unterstützt, welcher Längenwerte für elliptische Ecken akzeptiert. Es gibt zwei Werte, die die Form der Ecke beschreiben: Der erste Wert ist der horizontale, der zweite Wert der vertikale Radius. Wird nur ein Wert angegeben, gilt dieser für beide Richtungen (horizontal und vertikal).

<Länge>
Siehe Längen für mögliche Einheiten.
<Prozentzahl>
In 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 selbst dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.

Beispiele

div { -moz-border-radius-topleft:  20px;  /* Firefox bis Version 3.6 */
   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (vor WebKit Version 533) */
           border-top-left-radius: 20px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
}
/* Elliptische Ecke (unterstützt seit Firefox 3.5 [Gecko 1.9.1]) */
  
div { -moz-border-radius-topleft:   20px;       /* Runde Ecke, Fallback für Firefox 1-3.0 */
      -moz-border-radius-topleft:   20px 10px;  /* elliptischer Rahmen für Firefox 3.5-3.6 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (vor WebKit Version 532.5) */
            border-top-left-radius: 20px 10px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
}

Browser Kompatibilität

Browser Unterstützung von Prozentwerte elliptische Ecken
Internet Explorer --- --- ---
Firefox 1.0 (Gecko 1.0) -moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Ja Nein
Firefox 3.5 (Gecko 1.9.1) Ja
Firefox 4.0 (Gecko 2.0) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Ja Ja
Opera 10.5 border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Ja Ja
Safari 3.0 | Chrome 0.2 (WebKit 522) -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
Nein Ja
Safari 5.0 | Chrome (WebKit 532.5) border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Nein Ja

Spezifikation

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: fscholz, SJW, FredB, Yuichiro, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: fscholz,