CSS3 und abgerundete Ecken

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. Bei dieser Lösung bleiben ältere Versionen vom Internet Explorer außen vor. Seit der Version 9 des Internet Explorers (IE) beherrscht auch dieser Browser abgerundete Ecken, die per CSS3 realisiert werden.

Das die älteren IE-Versionen außen vor bleiben 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 <9 auf thematischen Weblogs, wie dieses hier ist, in der absoluten Minderheit. Alle IE-Versionen zusammen erreichen in diesem Weblog keine 10%. Davon entfällt knapp 2/3 auf Internet Explorer 9 und höher. 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 nicht von allen Browsern unterstützt.

Von den modernen Browsern unterstützen Opera, Google Chrome, Internet Explorer ab Version 9 und Mozilla Firefox und andere Browser, die auf die aktuelle Gecko-Version setzen, wie zum Beispiel SeaMonkey. Lediglich bei Safari muss man sich noch mit dem Vendor-Präfix -webkit-border-radius behelfen.

Einfache Abrundungen

Starten wir zum Aufwärmen mit einem einfachen Beispiel:

Bla

Hier der dazugehörige Code:

.abrundung {
    border: 1px solid #8b4513;
    -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;
    -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;
    -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 Wert den vertikalen Radius bestimmt.

Man kann die einzelnen Ecken explizit ansprechen schauen wir uns mal die Eigenschaften im Uhrzeigersinn mal an:

Oben Links

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

Oben Rechts

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

Unten Rechts

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

Unten Links

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

Soweit alles verstanden?

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 {
    -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 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: url(bild.jpg);
    height: 170px;
}

Generatoren

Wem das zu mühselig 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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float
• CSS3: Schriftgrößen mit rem angeben
• Linkschleuder 22: WordPress, CSS3, Schriften
• Linkschleuder 20: WordPress und CSS3
• HTML und CSS: lange Wörter in den Griff bekommen