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 und was wir draus 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 noch nicht. Der Internet Explorer Version 7 glänzt sowieso nicht mit der Umsetzung moderner CSS-Spezifikationen.

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


<div style="background-color: khaki;

   -moz-border-radius: 10px;

   -khtml-border-radius: 10px;

   border: 1px outset red;

   padding: 10px;">

Während der Safari-Browser für Windows die einfachen Border-Style-Optionen brav umsetzt, zeigt Firefox einerseits beim Rendern Unsauberkeiten und kann unterbrochene Linien (DASHED und DOTTED) nicht umsetzen. Safari kann wiederum 3D-Rahmeneffekte nicht darstellen (z.B. OUTSET im obigen khaki-farbenen Kasten). Beide Browser stellen in solchen Fällen einfache, geschlossene Linien dar.

Die rechte Abbildung zeigt deutlich, wie unterschiedlich die einzelnen Browser dieselbe Webseite darstellen.

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

-moz-border-radius-topright: 
-khtml-border-radius-topright:

Befindet sich NUR eine Grafik in einem Element mit runden Ecken, rundet nur Safari die Ecken ab. Firefox fühlt sich von einer Runde-Ecken-Vorgabe unbeeindruckt. Auch overflow:hidden ändert daran nichts.

Ein weiterer Unterschied zwischen beiden Browsern zeigt sich, wenn der Rahmen um eine Grafik runde Ecken haben soll. Safari rundet die Ecken ab und beschneidet die Grafik - wie gewollt. Firefox übt sich hingegen in Ignoranz.

Abgerundete bzw. "runde" Ecken per CSS

Verweise