CSS: Runde Ecken

In modernen Browsern ist es einfach runde Ecken für Boxen oder andere Elemente zu realisieren ohne dafür umständliche Bilder anlegen zu müssen. Wir definieren zunächst beispielhaft zwei Klassen für Ecken mit einem Radius von 3 Pixeln und 6 Pixeln:

.br3 { /* 3 Pixel Radius */
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
   border-radius: 3px;
}

.br6  { /* 6 Pixel Radius */
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   -khtml-border-radius: 6px;
   border-radius: 6px;
}

Das schöne an dieser Lösung ist, dass wir die Klassen "br3" und "br6" nun allen Elementen zuordnen können, die entsprechende Ecken erhalten sollen ohne dass wir die CSS-Regeln für jedes einzelne Element extra aufschreiben müssen.

Das folgende Beispiel zeigt einen DIV-Container mit 6 Pixel Radius Ecken und ein INPUT-Feld mit einem Eckenradius von 3 Pixeln:

<div class="br6" id="kasten">
   <input name="eingabe" class="br3" value="">
</div>

Zur Kompatibilität: Moderne Browser, die bereits CSS3 unterstützen, beherrschen schon "border-radius" und können dadurch die Ecken umsetzen. Für ältere Versionen von Firefox ist die Regel mit dem -moz-Präfix ausschlaggebend, für Google Chrome und Safari die Eigenschaft mit dem -webkit-Präfix. Ältere Browser zeigen statt der runden Ecken viereckige Ecken an.