Beispiel
Fügen Sie einen abgerundeten Rand an der linken oberen Ecke eines <div> Element:
div
{
border: 2px solid;
border-top-left-radius: 2em;
}
Versuch es selber " Definition und Verwendung
Die border-top-left-radius Eigenschaft definiert die Form der Grenze der oberen linken Ecke.
Tip: Diese Eigenschaft ermöglicht es Ihnen , abgerundete Ränder zu Elemente hinzuzufügen!
Standardwert: | 0 |
---|---|
Vererbt: | no |
Anima: | yes. Read about animatable Try it |
Version: | CSS3 |
JavaScript-Syntax: | object .style.borderTopLeftRadius="25px" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit- oder -moz- die erste Version an, die mit einem Präfix gearbeitet.
Eigentum | |||||
---|---|---|---|---|---|
border-top-left-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS-Syntax
border-top-left-radius:length|%[length|%]|initial|inherit;
Note: Die beiden Länge oder Prozentwerte der Grenz-top-left-radius Eigenschaften definieren den Radien einer Viertelellipse, die die Form der Ecke des Außenrandkante definiert. Der erste Wert ist der horizontale Radius, der zweite der vertikalen Radius. Wenn der zweite Wert weggelassen wird, wird es von der ersten kopiert. Wenn eine Länge Null ist, wird die Ecke quadratisch ist, nicht gerundet. Die Prozentsätze für den horizontalen Radius beziehen sich auf die Breite des Rahmens Box, während Prozentsätze für die senkrecht zur Höhe des Grenz Box beziehen Radius.
Eigenschaftswerte
Wert | Beschreibung | Spiel es |
---|---|---|
length | Definiert die Form der oberen linken Ecke | Spiel es " |
% | Definiert die Form der oberen linken Ecke in% | Spiel es " |
initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | Spiel es " |
inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS3 Tutorial: CSS3 Borders
HTML - DOM - Referenz: borderTopLeftRadius property