Ü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
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: <length-percentage>{1,2}

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

-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 */
}

Spezifikation

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-top-left-radius' in dieser Spezifikation.
Anwärter Empfehlung Initial definition

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
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 4
Vollständige Unterstützung 4
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 were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 1 — 12
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -moz-border-radius-topleft
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5
Vollständige Unterstützung 5
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android ? Chrome Android ? Edge 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 were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android ? Safari iOS ? Samsung Internet Android ?
PercentagesChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Vollständige Unterstützung 4
Vollständige Unterstützung 1
Hinweise
Hinweise Before Firefox 4, the <percentage> was relative to the width of the box even when specifying the radius for a height. This implied that -moz-border-radius-topleft was always drawing an arc of circle, and never an ellipse, when followed by a single value.
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android ? Safari iOS ? Samsung Internet Android ?
Ellipitcal cornersChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 3WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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