Wenn es darum geht, Blocklevel-Elemente mit runden oder sonstwie gestalteten Ecken zu versehen, hat jeder so seine eigene Methode. Einige greifen zu einer Kombination diverser browserspezifischer CSS-Eigenschaften (z.B. -moz-border-radius und/oder -webkit-border-radius) und andere nehmen Javascript her. Ich selbst bleibe lieber bei altmodischem HTML und CSS und erkläre gerne auch, warum ich das so mache.

HTML

Grundsätzlich greife ich bei runden Ecken eigentlich immer noch zum altmodischen img-Element. Das ist schließlich zum Darstellen von Bildern da und wenn es einen leeren alt-Text hat, kann man es auch bedenkenlos für reine Dekorationszwecke einsetzen. Für dieses Beispiel nehmen wir die vier Ecken einer Box in Form von vier kleinen Grafiken her und stecken sie zusammen mit etwas Text in einen div.

<div id="ecken">

  <img src="1.gif" alt="" class="eck1" />
  <img src="2.gif" alt="" class="eck2" />
  <img src="3.gif" alt="" class="eck3" />
  <img src="4.gif" alt="" class="eck4" />

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Damit wären die Grafiken schon mal im Dokument, bedürfen aber noch etwas Positionierungs-Nachhilfe.

CSS

Die Grafiken sollen in die Ecken verfrachtet werden; nichts leichter als das.

#ecken img { position:absolute; }
#ecken img.eck1 { top:0; left:0; }
#ecken img.eck2 { top:0; right:0; }
#ecken img.eck3 { bottom:0; left:0; }
#ecken img.eck4 { bottom:0; right:0; }

Damit die Positionierung auch nur innerhalb der Box mit der ID ecken erfolgt, muss diese noch relativ positioniert werden.

#ecken { position:relative; }

Und das war es auch schon. Die Grafiken sitzen bombenfest in den Ecken ihres Elternelements, ganz egal wie hoch und breit es wird. Die Beispielseite zeigt das Ganze in Aktion.

Warum so und nicht anders?

Diese Methode hat manchen Nachteil. Die Eckgrafiken, immerhin rein dekorativer Natur, werden per HTML eingebunden. Das ist nicht im Sinne der Erfinders und bläst den Quelltext auf.

Andererseits kann man dafür auf irgendwelche Javascript-Bibliotheken verzichten, die ebenso wenig überall funktionieren, wie die browserspezifischen Extrawürste -moz-border-radius und -webkit-border-radius. Wenn man stetig auf den Internet Explorer und seine Sonderwege schimpft, sollte man dies konsequenterweise bei allen Browsern so halten. Die Grafik-Ecken nach dieser Methode sind simpel umzusetzen, lassen sich individuell gestalten und funktionieren zuverlässig in den gängigen Browsern. Was macht da schon das bisschen Extra-HTML?