CSS – Container mit abgerundeten Ecken

17. August 2008

Solange CSS3 noch nicht freigegeben und verbreitet ist, kann man Container mit abgerundeten Ecken nur mit hässlicher Frickelarbeit realisieren – zumindest wenn man sie in allen weit verbreiteten Browsern angezeigt haben will. CSS3 wird eine eigene Eigenschaft border-radius dafür besitzen, die Safari und Firefox schon jetzt als vendor-specific properties anbieten:

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

Obwohl diese Angaben kein wirklich valides CSS 2.1 sind, bewegt man sich wenigstens im Rahmen der CSS-2.1-Spezifikation des W3C. Offensichtlicher Nachteil ist allerdings, dass die Angaben nur in Mozilla- und Webkit-basierenden Browsern funktionieren. Wem das – so wie mir – nichts ausmacht, hat so die einfachste Lösung.

Für alle anderen Browsern hat jeder seine „eigene“ Methode, die abgerundeten Ecken mit eingefügten Bildern zu realisieren. Mir gefallen alle diese Lösungen nicht besonders. Man nimmt mit ihnen semantisch nutzloses HTML in Kauf und vermischt nebenbei Inhalt und Präsentation, obwohl das Paradigma hinter HTML und CSS das eigentlich vermeiden will.

Die beste aller dieser Lösungen ist meiner Meinung nach diese:

.roundedCorners
{
    position: relative;
    padding: 10px;
}

.topLeftCorner
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 10px;
    background: url(topLeftCorner.png);
}

<div class="roundedCorners">
    <span class="topLeftCorner"></span>
    <span class="topRightCorner"></span>
    <span class="bottomLeftCorner"></span>
    <span class="bottomRightCorner"></span>
</div>

Analog zu .topLeftCorner kann man alle weiteren Ecken mit top, bottom, left und right positionieren.

Die <span>-Elemente verursachen die geringste semantische Verwirrung, wie leere Bilder oder leere Blöcke, die bei bestimmten Browserkonfigurationen sichtbar werden könnten.

Aber elegant ist es trotzdem nicht.

Kommentiere diesen Eintrag