Ü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.
| Initialwert | 0 |
|---|---|
| Anwendbar auf | alle 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. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Größe der Border-Box |
| Medien | visuell |
| Berechneter Wert | zwei absolute length oder percentage |
| Animierbar | 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), and these calc() functions have each half interpolated as real numbers. |
| Kanonische Reihenfolge | die 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 |
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 |
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-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius |
Nein | Ja |