Runde Ecken sehen schon schön aus. Bislang war es allerdings aufwendig sie zu realisieren. Man musste mehrere Grafiken erstellen und dann einbinden. Mit CSS 3 soll nun alles einfacher werden. Die Funktion “border-radius” verspricht dabei eine große Hilfe zu werden. Einziges Problem: Unterschiedliche Eigenschaften in den CSS.

Beispiel

border-radius: 5px;

Alle Ecken werden mit einer runden Ecke versehen, die einen Radius von 5 Pixel besitzt. Für Firefox und Webkit (Chrome und Safari) existieren Präfixe.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Möchte man nur eine Ecke abrunden gibt man diese Eigenschaften an:

-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;

Sollen die unteren Ecken ansprechen, so gibt man statt “top” einfach “bottom” an und wenn man die rechten Ecken abrunden will, statt “left” schreibt man “right”.

So könnte das im Code dann aussehen:

HTML

<div class="container"> Hier steht der Text</div>

CSS

.container {
border: 1 px solid #DDDDDD;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}

Ergebnis

runde Ecke

Browser

Nun die wichtigste Frage. Welche Browser unterstützen “border-radius”?

Der IE unterstützt diese Ecken ab Version 9, Opera ab Version  10. Firefox unterstützt “border-radius” mit dem Präfix bedingt seit den ersten Versionen. Der Chrome ist ebenso dabei wie Safari ab Version 5 (Version 4 mit Präfix).

Meinung

In aktuellen Browsern hat man bereits eine breite Unterstützung. Ich setze “border-radius” schon gerne ein und verzichte auf das Einbinden von Grafiken. In älteren Browsern bleiben die Ecken jedoch eckig. Hat man allerdings die Vorgabe eine hohe Browserunterstützung bieten zu müssen kommt man an Grafiken nicht vorbei.