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
Berechneter Wertzwei absolute length oder percentage
AnimationstypLĂ€ngenangabe, Prozentsatz oder calc();

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:
This API has not been standardized. 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
Berechneter Wertzwei absolute length oder percentage
AnimationstypLĂ€ngenangabe, Prozentsatz oder calc();

Browser KompatibilitÀt

BCD tables only load in the browser

Siehe auch