ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Gerundetete Ecken mit border-radius und CSS3 programmieren

Als Programmierer haben Sie bestimmt die runden Ecken der einzelnen Tabellen und Blöcken dieser Webseite gesehen. Die gute Nachrichten sind - Sie können es auch selber ohne ein Grafiker zu sein. Alles, was Sie brauchen ist ein bisschen HTML, CSS3 und unerlässlich - einen modernen Browser, der CSS3 darstellen kann.

Problemstellung - gerundete Ecken von Tabellen und Containern mit HTML und CSS

Wenn Sie auf den klassischen Weg gerundetete Tabellen haben wollen, so müssen Sie Grafiken erzeugen, die als Hintergrund für die ganze Tabelle/Block eingesetzt werden. Jedoch können Sie nur schwer Grafiken erzeugen, die auf einen beliebigen Hintergrund (also transparent) erzeigen - diese sehen nur dann gut aus, wenn Sie zusammen mit der Hintergrundfarbe erzeugt werden. HTML5 und CSS3 haben dafür gesorgt und Sie können das nun mit ein Paar Tags so gestalten, wie Sie gerne möchten. Zur Hilfe kommt die CSS3 Eigenschaft border-radius.

Rundungen ohne Grafiken im HTML - die Lösung

Wenn Sie einen Container (div) haben, so haben Sie die Möglichkeit direkt inline die CSS3 Eigenschaft border-radius einzusetzen oder Sie können eine Klasse in Ihrer CSS Datei referenzieren:

Die obige Ausführung erzeugt Rundungen an allen vier Ecken Ihres Divs mit jeweils einen Radius von 5 pixel. Sie haben auch die Möglichkeit pro Ecke einzeln zu bestimmen, ob es eine Rundung erzeugt wird:

Beim obigen Beispiel werden nur die oberen zwei Ecken mit jeweils 5 pixel Radius gerunden, die unteren aber nicht. Wenn Sie die Eigenschaften gar nicht in der Kasse erwähnen, so wird auch kein border-radius gesetzt. Sie können auch separat eine CSS Klasse erzeugen und diese in Ihrem Code referenzieren, um einfacher und zentralisierter Ihre Seiten zu gestalten:

und dann folgt die Klasse:

.gerundet {border-radius: 10px; width: 50px; height: 100px;}

Fertig - Ihre Seite sieht nur viel schicker aus.

Voraussetzungen/Kompatibilität von border-radius

Sie dürfen nicht vergessen, dass es sich hierbei um CSS3 Eigenschaften handelt, die nicht unter allen Browsern darstellbar sind und nicht zu jedem HTML Container angewendet werden können:

  • Browser - Sie brauchen einen CSS3/HTML5-fähigen Browser (Mozilla Firefox, Chrome, Internet Explorer ab IE9 etc.)
  • HTML - Sie können leider keine Tabelle () runden, diese Funktion funktioniert ausschließlich mit
    . Das müsste auch richtig heißen, denn Tabellen sollten nicht als Layout Elemente eingesetzt werden, sondern nur wenn Sie tabelarische Strukturen haben. Die Tabellen können Sie natürlich immer in ein Div einbetten, der border-radius bekommt und fertig.
    û