CSS Eigenschaft border-radius
Beispiel
Abgerundete Ecken zu zwei <div>-Elementen hinzufügen:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die border-radius
Eigenschaft definiert den Radius der Ecken des Elements.
Tipp: Mit dieser Eigenschaft können Sie Elementen abgerundete Ecken hinzufügen!
Diese Eigenschaft kann einen bis vier Werte haben. Hier sind die Regeln:
Vier Werte - Randradius: 15px 50px 30px 5px; (erster Wert gilt für die linke obere Ecke, zweiter Wert gilt für obere rechte Ecke, dritter Wert gilt für untere rechte Ecke und vierter Wert gilt für untere linke Ecke):
Drei Werte - border-radius: 15px 50px 30px; (erster Wert gilt für die obere linke Ecke, zweiter Wert gilt für obere rechte und untere linke Ecke und dritter Wert gilt für untere rechte Ecke):
Zwei Werte - border-radius: 15px 50px; (Der erste Wert gilt für die Ecken oben links und unten rechts, und der zweite Wert gilt für die Ecken oben rechts und unten links):
Ein Wert - border-radius: 15px; (der Wert gilt für alle vier Ecken, die gleichmäßig gerundet sind:
Standardwert: | 0 |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.borderRadius="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-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-Syntax
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Hinweis: Die vier Werte für jeden Radius sind in der Reihenfolge oben links, oben rechts, unten rechts, unten links angegeben. Wenn unten links weggelassen wird, ist es dasselbe wie oben rechts. Wenn unten rechts weggelassen wird, ist es dasselbe wie oben links. Wenn oben rechts weggelassen wird, ist es dasselbe wie oben links.
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners 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
Abgerundete Ecken für ein Element mit Hintergrundfarbe setzen:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Beispiel
Abgerundete Ecken für ein Element mit Rand festlegen:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Beispiel
Abgerundete Ecken für ein Element mit Hintergrundbild festlegen:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Beispiel
Beachten Sie auch dies:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Verwandte Seiten
CSS-Tutorial: Abgerundete CSS-Ecken
HTML-DOM-Referenz: Eigenschaft borderRadius