Einleitung

Es gibt verschiedene Möglichkeiten mit CSS einen DIV-Container mit abgerundeten Ecken darzustellen. Eine schnelle und sehr simple Methode dazu, die folgende DIV-Box mit abgerundeten Ecken zu erstellen, möchte ich in diesem Tutorial zeigen.

Hierzu benötigt man jedoch zuerst einmal vier Grafiken mit den jeweils abgerundeten Ecken. Dazu die folgende kleine Animation, welche zeigt, wie solche Ecken schnell und einfach in Photoshop zu erstellen sind:

Schritt 1

Zuerst benötigt man einmal den XTHML-Code des DIV-Containers mit der ID "box", in welchem ich beispielshalber einmal einen kleinen Text hinterlegt habe:

<div id="box">
<span class="box-top-right"></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut nibh...
<span class="box-bottom-left"></span>
<span class="box-bottom-right"></span>
</div>

Nun erstellen wir im Stylesheet einen neuen CSS-Stil für den DIV-Container "box" und definieren die Grundinformationen wie folgt:

#box {
background: #669933 url(images/box-top-left.gif) no-repeat;
position: relative;
padding: 20px;
width: 550px;
height: auto;
}

Im DIV-Container "box" wird neben der Hintergrundfarbe auch die Grafik der ersten abgerundeten Ecke (oben links) definiert. Der Wert bei padding entspricht der Abmessung eurer Grafiken mit den abgerundeten Ecken.

Schritt 2

Nun definieren wir die Gemeinsamkeiten der drei SPAN-Klassen, weswegen diese in einen Abschnitt zusammengefügt werden:

span.box-top-right, span.box-bottom-left, span.box-bottom-right {
position: absolute;
width: 20px;
height: 20px;
display: block;
}

Die Höhe- und Breitenangabe müssen den Abmessungen eurer Grafiken mit den abgerundeten Ecken entsprechen.

Schritt 3

Zuletzt definieren wir die unterschiedlichen Quellen und Positionen der übrigen drei Bilder in der jeweiligen SPAN-Klasse:

span.box-top-right {
background: url(images/box-top-right.gif) no-repeat;
top: 0;
right: 0;
}
span.box-bottom-left {
background: url(images/box-bottom-left.gif) no-repeat;
bottom: 0;
left: 0;
}
span.box-bottom-right {
background: url(images/box-bottom-right.gif) no-repeat;
bottom: 0;
right: 0;
}

Soweit so gut mit dem regulären Teil des Tutorials …

Broserkompatibilität und -fixes

Unter allen aktuell gängigen Browsern funktioniert das Code Snippet einwandfrei, Ausnahme bildet der Internet Explorer 6, der bekanntermaßen mit CSS auf Kriegsfuß steht. Zwar funktioniert auch hier alles, solange die Box nicht auf die maximale zur Verfügung stehende Breite des Contentbereiches skaliert wird, tut man dies jedoch, wie ich in meinem Beispiel hier, so verschiebt sich im IE6 der Fußbereich der Box um einen Pixel nach unten. Um dieses Problem nun zu eliminieren folgenden IE6 Fix eurem Stylesheet hinzufügen:

/* IE6 Fix */
* html span.box-top-right, span.box-bottom-left, span.box-bottom-right {
width: 19px;
height: 19px;
margin-bottom: -1px;
}
/* IE6 Fix END */

Die Höhe- und Breitenangabe entspricht in diesem Fall den Abmessungen eurer Grafiken mit den abgerundeten Ecken minus 1 Pixel in Höhe und Breite.

Der Hack "* html" sorgt dafür, das alle Browser, außer dem IE6, diesen Abschnitt überspringen und nicht berücksichten. Für den IE7 sorgt so z.B. der Hack "*:first-child+html" dafür, das alle Browser außer dem IE7, einen Abschnitt auslassen, aber zu den einzelnen CSS-Browserhacks komme ich demnächst einmal ausführlich in einem eigenen CSS-Tutorial.

In meiner oben gezeigten Beispiel-Box habe ich den IE6 Fix nicht eingefügt, so das man den Fehler im IE6 sehen kann und einmal weiß, wie das ganze ohne Fix ausschaut.