Abgerundete bzw. "runde" Ecken per CSS

Der philosophischen Frage, ob Ecken rund sein können, möchten wir an dieser Stelle nicht nachgehen. Wir unterstellen einfach, es war zuvor eine Ecke und eckig. Was wir daraus machen, ist uns überlassen.

Das W3C wird mit CSS Version 3 einige lang ersehnte Verbesserungen einführen, so auch runde Ecken. Drei Browser können dies schon heute, Firefox, GoogleChrome und Safari (in den aktuellen Versionen). Opera kann es inzwischen auch und reagiert auf den endgültigen Befehl: border-radius. Die Internet Explorer Versionen 7 und 8 glänzen sowieso nicht mit der Umsetzung moderner CSS-Spezifikationen.

Dazu müssen Sie folgende Zeilen in Ihr CSS einbinden. Wenn Ihr Browser Ecken abgerundet darstellen kann, erhalten Sie die folgende Box abgerundet dargestellt.

<div style="background-color: khaki;

   -moz-border-radius: 10px;

   -webkit-border-radius: 10px;

   border-radius: 10px;

   border: 1px outset red;

   padding: 10px;">

Es können auch einzelne Ecken beschrieben werden. Dazu verwenden Sie z.B. folgende Anweisungen:

-webkit-border-top-right-radius: 1px;
-moz-border-radius-topright: 1px;
border-top-right-radius: 1px;

Befindet sich eine Grafik in einem Element mit runden Ecken, unterscheiden sich die Browsern noch in der Umsetzung.

Verweise

• Border-Radius.com
• Runde Ecken schon heute
• Mehr zu runden Ecken per CSS 3
• Rahmen mit abgerundeten Ecken