CSS Eigenschaft border-bottom-right-radius
Beispiel
Fügen Sie der unteren rechten Ecke zweier <div>-Elemente abgerundete Rahmen hinzu:
#example1 {
border: 2px solid red;
border-bottom-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-right-radius: 50px
20px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die border-bottom-right-radius
Eigenschaft definiert den Radius der unteren rechten Ecke.
Tipp: Mit dieser Eigenschaft können Sie Elementen abgerundete Ränder hinzufügen!
Standardwert: | 0 |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.borderBottomRightRadius="25px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- oder -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
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;
Hinweis: Wenn Sie zwei Werte festlegen, gilt der erste für den unteren Rand und der zweite für den rechten Rand. Wenn der zweite Wert weggelassen wird, wird er vom ersten kopiert. Wenn eine der Längen Null ist, ist die Ecke quadratisch und nicht abgerundet.
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-right corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-right corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Fügen Sie der rechten unteren Ecke abgerundete Ränder in Prozent hinzu:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-right-radius: 40%;
}
Verwandte Seiten
CSS-Tutorial: Abgerundete CSS-Ecken
HTML-DOM-Referenz: Eigenschaft borderBottomRightRadius