Beispiel
In abgerundeten Ränder zu einem <div> Element:
div
{
border: 2px solid;
border-radius: 25px;
}
Versuch es selber " Definition und Verwendung
Die border-radius-Eigenschaft ist eine zusammenfassende Eigenschaft für die vier Grenzeinstellung - * - Radius Eigenschaften.
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.borderRadius="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-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;Note: Die vier Werte für die einzelnen Radien in der angegebenen Reihenfolge sind oben links, oben rechts, unten rechts, unten links. Wenn unten links weggelassen wird, ist es das gleiche wie oben rechts. Wenn unten rechts weggelassen wird, ist es das gleiche wie oben links. Wenn oben rechts weggelassen wird, ist es das gleiche wie oben links.
Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| length | Definiert die Form der Ecken. Der Standardwert ist 0 | Spiel es " |
| % | Definiert die Form der Ecken 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 |
Beispiel 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Beispiel 2
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
CSS3 Tutorial: CSS3 Borders
HTML - DOM - Referenz: borderRadius property