CSS Eigenschaft border-top-right-radius
Beispiel
Fügen Sie der oberen rechten Ecke zweier <div>-Elemente abgerundete Rahmen hinzu:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die border-top-right-radius
Eigenschaft definiert den Radius der oberen 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.borderTopRightRadius="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-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-Syntax
border-top-right-radius: length|% [length|%]|initial|inherit;
Hinweis: Wenn Sie zwei Werte festlegen, gilt der erste für den oberen 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 top-right corner. Read about length units | |
% | Defines the shape of the top-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 oberen rechten Ecke abgerundete Ränder in Prozent hinzu:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
Verwandte Seiten
CSS-Tutorial: Abgerundete CSS-Ecken
HTML-DOM-Referenz: Eigenschaft borderTopRightRadius