CSS3 und abgerundete Ecken

Perun am 29. Juli 2010 um 13:51 Uhr

Abgerundete Ecken sind ein beliebtes Mittel um das Layout einer Website aufzupeppen. Um abgerundete Ecken zu erreichen gibt es mehrere Ansätze: per Javascript, mit verschachtelten div-Blöcken und Grafiken oder mit Hilfe von CSS3.

Im folgenden werde ich mich der Lösung mit CSS3 widmen. Damit bleiben momentan alle Internet-Explorer-Versionen außen vor. Mit der Version 9 des Internet Explorers (IE) soll sich das aber ändern.

Das der IE außen vor bleibt ist in meinen Augen nicht schlimm. Zum einen sind abgerundete Ecken Layout-Elemente, es werden also nicht wichtige Teile des Inhalts ausgeblendet bzw. vor dem IE versteckt. Zum anderen ist der IE auf thematischen Weblogs, wie dieses hier ist, in der Minderheit. Alle IE-Versionen zusammen erreichen in diesem Weblog keine 15%.

Daher sehe ich es nicht ein, für den IE in diesem Zusammenhang irgendwelche Hacks, Javascript-Spirenzchen oder Grafik-Geschnetzeltes zu machen. Das frisst Zeit und Performance, die man besser anderswo investiert.

Aber zurück zum Thema: abgerundete Ecken und CSS3.

`border-radius` und die Browser

In CSS3 existiert die Eigenschaft border-radius. Da aber die Spezifikationen noch lediglich als Arbeitsentwurf (Working draft) existieren, also noch nicht veröffentlicht wurden, wird zur Zeit border-radius afaik nur von Opera seit der Version 10.6 und von Google Chrome unterstützt.

Andere Browser-Hersteller behelfen sich noch mit anbieterspezifischen CSS-Eigenschaften. Dabei kommen hauptsächlich -moz-border-radius für alle Geckos (Firefox, SeaMonkey & Co.) und -webkit-border-radius für alle Webkit-Browser (Safari, Google Chrome, Chromium) zum Einsatz.

Es existiert noch -khtml-border-radius um mittlerweile nur noch den Konqueror auf Linux anzusprechen. Hier muss jeder für sich selber entscheiden ob er auch diesen Browser berücksichtigt. Auf perun.net setzen etwa 5,5 % der Besucher Linux als Betriebssystem ein, aber lediglich 0,08 % der Besucher setzen auf Konqueror. Die meisten Linuxer die hier vorbeikommen, setzen auf Firefox oder SeaMonkey.

Einfache Abrundungen

Starten wir zum Aufwärmen mit einem einfachen Beispiel:

Bla

Hier der dazugehörige Code:

.abrundung {
    border: 1px solid #8b4513;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: #eee8aa;
    padding: 2em;
}

Wie gesagt, es handelt sich hier bei um ein einfaches Beispiel, wo die Abrundungen der Ecken einen Radius von sieben Pixel haben.

Unterschiedliche Abrundungen in der Box

Wem der obere Beispiel langweilig ist, der kann einzelnen Ecken auch unterschiedliche Abrundungen spendieren:

Bla

Und hier folgt der Code:

.abrundung {
    border: 1px solid #8b4513;
    -moz-border-radius: 5px 59px;
    -webkit-border-radius: 5px 59px;
    border-radius: 5px 59px;
    background: #eee8aa;
    padding: 2em;
}

In diesem Beispiel habe ich den Ecken oben Links und unten Rechts einen Radius von fünf Pixel und den anderen beiden Ecken einen Radius von 59 Pixel spendiert. Man kann auch jeder einzelnen Ecke einen speziellen Radius verpassen: border-radius: 5px 59px 3px 99px; (oben Links, oben Rechts, unten Rechts und unten Links).

Abrundungen variieren

Wem das alles immer noch nicht ausreicht, der kann den Radius einer einzelner Abrundung horizontal und/oder vertikal variieren. Hier ein Beispiel:

Bla

Hier der dazugehörige Code:

.abrundung {
    border: 1px solid #8b4513;
    -moz-border-radius-topleft: 55px 15px;
    -webkit-border-top-left-radius: 55px 15px;
    border-top-left-radius: 55px 15px;
    background: #eee8aa;
    padding: 2em;
}

An diesem recht einfachen Beispiel erkennt man mehre Sache. Zum einen das man den Radius der gleichen Ecke varriieren kann, wobei der erste Wert den horizontalen und der zweite Vert den vertikalen Radius bestimmt.

Zum anderen erkennt man leider das die Browserhersteller mal wieder ein eigenes Süppchen kochen. Man kann die einzelnen Ecken explizit ansprechen schauen wir uns mal die Eigenschaften im Uhrzeigersinn mal an:

Oben Links

-moz-border-radius-topleft: 9px;
-webkit-border-top-left-radius: 9px;
border-top-left-radius: 9px;

Oben Rechts

-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;

Unten Rechts

-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;

Unten Links

-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;

Während sich die Webkit-Angaben an dem "originalen" border-radius orientiert -webkit-[...] kocht Mozilla hier ein eigenes Süppchen: -moz-border-radius-topleft vs. border-top-left-radius. Für so etwas sind Webworker immer besonders dankbar.

Abrundungen ohne Rahmen

Was ich persönlich als sehr gut empfinde ist die tatsache, dass man Abrundungen einer Box erreichen kann auch ohne Angaben zum Rahmen zu machen. Hier ein Beispiel:

Bla

Hier der Code zum oberen Beispiel:

.abrundung {
    -moz-border-radius: 5px 59px;
    -webkit-border-radius: 5px 59px;
    border-radius: 5px 59px;
    background: #eee8aa;
    padding: 2em;
}

Ich finde die Möglichkeit Abrundungen auch ohne Rahmen-Angaben zu realisieren, weil speziell bei einem größeren Radius die Rahmen imho schlechter rendern ("ausgefranst") als der abgerundete Hintergrund.

Abrundungen mit Hintergrundbild

Ja, man kann auch Hintergrundbilder abrunden:

Und wie gehabt der Code:

.abrundung {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: url(bild.jpg);
    height: 170px;
}

Generatoren

Wem zu mühsellig ist, sich die ganzen einzelnen Eigenschaften zu merken, der kann auf eine Reihe von CSS3- bzw. Rahmen-Generatoren zurückgreifen. Hier zwei davon:

CSS3-Generator: neben den abgerundeten Ecken generiert die Webanwendung auch Box- und Textschatten.
Border-Radius.com: generiert den Code für abgerundete Ecken, auch für Webkit- und Gecko-Browser.

Diesen Artikel weiterempfehlen:

1. – krisz

Kommentar vom 29. Juli 2010 um 14:49

Im Google Reader werden diese CSS Formatierungen übrigens nicht angezeigt.

2. – Torsten

Kommentar vom 29. Juli 2010 um 14:55

Und schon hatte ich mich erschrocken, weil ich mir die Webseite mit dem IE8 angesehen hatte. Schöner Artikel

3. – maTTes

Kommentar vom 29. Juli 2010 um 15:46

Schöne sache das ganze, danke sehr

4. – Oliver Rumpf

Kommentar vom 29. Juli 2010 um 16:16

Bei mir sind die Besucher zu 53 % mit dem IE unterwegs …

Trotzdem danke für die Erklärung!

5. – Christoph

Kommentar vom 29. Juli 2010 um 18:16

Besonders für Hintergründe (letztes Bsp) finde ich das ne klasse Sache. Nur die fehlende Unterstützung im IE ist natülich doof…

6. – Sahanya

Kommentar vom 29. Juli 2010 um 20:23

Grafik-Geschnetzeltes

7. – nico

Kommentar vom 29. Juli 2010 um 20:41

Durch Einbinden von pie.htc können einige der css3 eigenschaften auch im ie ab v6 angezeigt werden.
http://css3pie.com/

8. – Wolfgang Wagner

Kommentar vom 29. Juli 2010 um 21:18

Eine sehr schöne Übersicht der aktuellen Möglichkeiten.
Besonders gefällt mir der Abschnitt "Abrundungen variieren" mit den Beispielen zu den verschiedenen Browsern.

Grüße vom Bodensee
Wolfgang

9. – Frank

Kommentar vom 29. Juli 2010 um 21:22

oder Turbine – macht es ebenso leichter und trotzdem ohne online-Tool; passte ja zu einem der letzten Artikel

10. – Perun

Kommentar vom 30. Juli 2010 um 00:45

@krisz,

das finde ich zwar einerseits schade, aber anderseits kommst du auch auf die Website.

11. – Sven

Kommentar vom 30. Juli 2010 um 10:21

Besonders spannend fand ich es als ich herausfand, dass man mit zwei durch Slash getrennten Werten (in Webkitbrowsern ohne Slash) auch sehr leicht ovale Formen bekommt.
Hier http://css-tricks.com/quickie-css3-tricks-with-fallbacks/ gefunden und hier http://designxxl24.de/tvclub-test/ testweise angewandt.

12. – Pascal

Kommentar vom 30. Juli 2010 um 12:34

Google Chrome und Chromium benötigen nicht mehr -webkit-border-radius. Die unterstützen auch das "offizielle"

13. – Perun

Kommentar vom 30. Juli 2010 um 16:46

@Pascal,

das weiß ich, deswegen steht auch folgendes im Artikel:

[...] wird zur Zeit border-radius afaik nur von Opera seit der Version 10.6 und von Google Chrome unterstützt.

14. – Pascal

Kommentar vom 30. Juli 2010 um 17:09

Sorry, hatte den Absatz übersehen und nur

-webkit-border-radius für alle Webkit-Browser (Safari, Google Chrome, Chromium) zum Einsatz.

gelesen

15. – andreas

Kommentar vom 02. August 2010 um 18:44

Also bei allen Tests, die ich verzapft hab, kann Safari auch mit border-radius umgehen. Einzig box-shadow benötigt noch ein »-webkit-«.

16. – CSS3 und die "Durchsichtigkeit": Opacity vs. RGBA | perun.net

Pingback vom 13. August 2010 um 15:36

[...] dem was ich in den letzten beiden CSS3-Artikeln – Abgerundete Ecken und Schatten für Text und Boxen – geschrieben habe, kann man so einiges [...]

Peruns Weblog - Webwork und Internet