Wollte man bisher Block-Elemente abrunden, musste man entweder zu Javascript greifen oder per background-Eigenschaft eine Bilddatei einbinden. Mit CSS3 kann man sich dieses Gewurschtel sparen und auf die Eigenschaft “border-radius” zurückgreifen. Die Möglichkeiten sind vielfältig, sogar Kreise sind mit entsprechendem Code darstellbar. Aber dazu später mehr.

Ich persönliche mag abgerundete Ecken. Es sieht einfach modern und “rund” aus. Ha ha! Wortwitz verstanden?

Syntax

.box {
border-radius: 10px;
}

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

• Apple Safari 5+
• Google Chrome 10+
• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Schauen wir uns das Beispiel mal genauer an:

.box {
border-radius: 10px;
}

Die Angabe eines einzelnen Wertes rundet alle vier Ecken ab. So schaut das Ergebnis aus:

Natürlich können auch einzelne Ecken abgerundet werden. Dabei sind auch unterschiedliche Rundungen möglich:

.box {
border-top-left-radius: 50px;
border-top-right-radius: 25px;
}

In diesem Beispiel werden lediglich die oberen beiden Ecken abgerundet. Die linke obere Ecke mit 50 px und die rechte mit 25 px.

Hier geht es dann auch kürzer:

.box {
border-radius: 50px 25px 0 0;
}

Es gilt folgende Reihenfolge: oben links, oben rechts, unten rechts und als letztes unten links.

Zur Vervollständigung die Syntax für alle Ecken:

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

Für den Firefox etwas anders:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Die Länge der Rundung kann ebenfalls bestimmt werden. Es wird einfach ein zweiter Wert mitgegeben, wobei der erste für die Rundung und der zweite für die Länge steht.

.box {
border-top-left-radius: 50px 100px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 50px 100px;
}

Ergibt dann dies:

Auch interessant: es lassen sich sogar Kreise darstellen:

.kreis {
width:100px;
height:100px;
border-radius: 50px;
}

Auf der Demo-Seite gibt es weitere Beispiele.

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: