Abgerundete Ecken

Webseiten bestehen aus rechteckigen Kisten. Alles Runde ist Grafik.

Um nun Kisten mit abgerundeten Ecken zu erstellen, muß etwas Aufwand betrieben werden, indem man diese Grafiken erst erstellt. Dafür verwenden Sie ein vorhandenes Grafikprogramm wie CorelDraw oder Photopaint. Sie können diese Grafiken auch online erstellen unter  www.roundedcornr.com.

Beispiel 1

Diese Kiste hat eine statische Größe von 200x250px und ist somit ziemlich unflexibel.

Dort können Sie ganz unten unter "Single RoundedCornr Image" einzelne Bilder nach genauen Vorgaben erstellen.

Zur Farbauswahl möchte ich an dieser Stelle noch mal auf das Firefox-Plugin ColorZilla verweisen.

Das erstellte Bild kann nun dem DIV als Hintergrund zugewiesen werden.

#bsp1 {
  width: 200px;
  height: 250px;
  background: url(pics/200x250rounded.gif) no-repeat top left;
  padding: 0;
  margin-right: 10px;
}
#bsp1 h3 {
  padding: 15px;
  margin: 0;
}
#bsp1 p {
  padding: 0px 15px 15px 15px;
  margin: 0;
}

Die Kiste passt sich aber nicht an. Also nicht ganz das Wahre.

Um nun einen solchen abgerundeten Kasten zu bauen, der sich flexibel seinem Inhalt anpasst, reicht eine Grafik also leider nicht aus.

Feste Breite, variable Höhe

Um zunächst einmal eine flexible Höhe zu ermöglichen, muß das Bild zerschnitten werden (engl: slice). Also wieder mal Corel oder Photoshop. Vielleicht aber auch das kostenlose Splitz.

Wie auch immer, das Bild muß in etwa so wie rechts "gesliced" werden.

Das obere und untere Bild müßen in diesem Fall so hoch sein, wie der verwendete Radius. Für das mittlere Bild reicht eine Höhe von 1px, da es vertikal wiederholt (gekachelt) wird.

Immer dran denken: Dateien möglichst klein halten!

Hintergrundbild

Jedes HTML-Element kann ein Hintergrundbild erhalten. Leider nur eines. Also brauchen wir drei Elemente zur Aufnahme der drei Bilder. Hier ist nun je nach Anwendungsfall Kreativität gefragt, das Zunutzemachen einfacher Sachverhalte.

Beispiel 2

Ich bin so hoch wie mein Inhalt!

Beispiel 2: Zunächst einmal brauchen wir ein DIV mit der Breite der Grafik (200px). Dieses bekommt als Hintergrund das mittlere 1px-hohe Bild, natürlich vertikal gekachelt.

Beispiel 3

Ich bin so hoch wie mein Inhalt!

Beispiel 3: Das erste Kind-Element dieser Kiste (h3) bekommt die obere Rundung, das letzte (p) die untere Rundung als Hintergrund.

.bsp3 {
  width: 200px;
  background: url(pics/200_rounded_center.gif) repeat-y top left;
  padding: 0px;
}
.bsp3 h3 {
  background: url(pics/200_rounded_top.gif) no-repeat top left;
  padding: 15px;
  margin: 0;
}
.bsp3 p {
  background: url(pics/200_rounded_bottom.gif) no-repeat bottom left;
  padding: 0px 15px 15px 15px;
  margin: 0;
}

Beispiel 4

Ich bin so hoch wie mein Inhalt! Und wenn mein Inhalt größer wird, werde ich höher. Nur breiter kann ich leider nicht werden.

Nur mein letztes Element bekommt das Hintergrundbild.

Beispiel 4: Sind mehr Absätze als einer vorhanden, muß z.B. für den letzten eine Klasse definiert werden: <p class="letzter">, damit nur für diesen der Hintergrund gilt.

Wie schon gesagt: Seien Sie kreativ!

Mit den Paddings und Margins müssen Sie halt etwas experimentieren, bis es passt.

.bsp4 {
  clear: both;
  float: left;
  width: 200px;
  background: url(pics/200_rounded_center.gif) repeat-y top left;
  padding: 0px;
}
.bsp4 h3 {
  background: url(pics/200_rounded_top.gif) no-repeat top left;
  padding: 15px;
  margin: 0;
}
.bsp4 p {
  padding: 0px 15px 15px 15px;
  margin: 0;
}
.bsp4 p.letzter {
  background: url(pics/200_rounded_bottom.gif) no-repeat bottom left;
}

Also...

... wie Sie sehen, ganz so einfach ist es nicht mit abgerundeten Ecken. Denken Sie auch immer daran, dass das HTML-Element groß genug sein muß, um das Hintergrundbild aufzunehmen, sonst wird dieses abgeschnitten.

Ganz wichtig: Testen Sie auf jeden Fall das Resultat in verschiedenen Browsern, möglichst auch im Sorgenkind IE 6!

Rundung ohne Grafik

Durch einen kleinen HTML-Trick geht es auch ohne Grafiken, jedoch werden dazu leere HTML-Container benötigt. Das HTML wird also unnötig aufgebläht, was eigentlich vermieden werden sollte, und auch das CSS wird recht umfangreich. Tipp: Quellcode anschauen.

Beispiele von Stu Nicholls.

Beispiel 5

Ich habe eine frei einstellbare Breite (z.B. 100% oder 400px) und meine Höhe passt sich meinem Inhalt an.

Zukunftsmusik

In CSS 3 ist vorgesehen, einem Element mehrere Hintergrundbilder zuordnen zu können, jedoch kann es noch einige Jahre dauern, bis alle relevanten Browser dies hinlänglich unterstützen.

Schön wäre es ja, könnte man dem Border einfach per CSS abgerundete Ecken verpassen. Im Firefox geht so etwas sogar. Es ist davon auszugehen, dass diese Eigenschaft in den offiziellen Standard mit aufgenommen wird.

Beispiel 6

Dieser Absatz hat im Firefox abgerundete Ecken, der IE ignoriert die Anweisung und stellt den Rahmen wie gewohnt rechteckig dar. Diese Eigenschaft sollte also (noch) nicht für elementare Layouts verwendet werden, sondern lediglich eine untergeordnete Rolle spielen.

#rund {
  border: 3px solid gray;
  padding: 10px;
  -moz-border-radius: 15px;
}