Beispiel
Fügen Sie einen abgerundeten Rand an der unteren rechten Ecke eines <div> Element:
div
{
border: 2px solid;
border-bottom-right-radius: 2em;
}
Versuch es selber " Definition und Verwendung
Die border-bottom-right-radius Eigenschaft definiert die Form der Grenze der unteren rechten 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.borderBottomRightRadius="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-bottom-right-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS-Syntax
border-bottom-right-radius:length|%[length|%]|initial|inherit;Note: Die beiden Länge oder prozentualen Werte der border-bottom-right-radius - Eigenschaften definieren die Radien einer Viertelellipse, die die Form der Ecke der äußeren Randkante 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 unteren rechten Ecke. Der Standardwert ist 0 | Spiel es " |
| % | Definiert die Form der unteren rechten 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: borderBottomRightRadius property