Abgerundete Ecken mit CSS3

Dank CSS3 gibt es jetzt endlich abgerundete Ecken als allgemeinen Standard. Mittlerweile wird der dazugehörige CSS-Befehl border-radius sogar vom Internet Explorer (Version 9) interpretiert. Bis man sich auf den Befehl allerdings verlassen kann wirds noch einige Järchen dauern, zumal der IE9 nur auf Vista und Windows 7 läuft, alles darunter bleibt also beim IE8 hängen.

Die Handhabung ist recht simpel:

border-radius: 5px;

Gibt allen vier Ecken eines Elementes eine Abrundung mit einem Radius von 5 Pixeln.

Man kann auch jeder Ecke einen anderen Radius geben, wobei der erste Wert für die Ecke links oben steht und dann im Uhrzeigersinn um die Box herumgeht:

border-radius: 7px 5px 10px 3px;

Wenn man nur zwei Angaben macht werden die Werte gespiegelt:

border-radius: 5px 10px;

wirkt dann gleich wie

border-radius: 5px 10px 5px 10px;

Die von mir hier erwähnten erweiterten Deformierungs-Optionen, bei denen man jeder Kante zwei Werte geben kann und dadurch die Box ziemlich stark verziehgen kann, haben sich nicht durchgesetzt.

Wer für ältere Firefox-Versionen rückwärtskompatibel bleiben will, kann den schon seit längerem existierenden Befehl -moz-border-radius anhängen, mit -webkit-border-radius erreicht man das auch für Safari und Google Chrome.