CSS3 und abgerundete Ecken

Von Vladimir am 29. 07. 2010 um 13:51 – Aktualisiert am 02.11.2012 um 18:30

Im folgenden Artikel wir beschrieben, wie man mit CSS3 abgerundete Ecken realisiert. Aktualisiert am 02. November 2012.

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 diesem weblog keine 10%. davon entfällt knapp 2>

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

CSS-Buch

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.

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

27 Kommentare

1. – krisz

Kommentar vom 29.07.2010 um 14:49

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

Kommentar vom 29.07.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.07.2010 um 15:46

Schöne sache das ganze, danke sehr
4. – Oliver Rumpf

Kommentar vom 29.07.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.07.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.07.2010 um 20:23

Grafik-Geschnetzeltes
7. – nico

Kommentar vom 29.07.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.07.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.07.2010 um 21:22

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:

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

Kommentar vom 30.07.2010 um 00:45

@krisz,

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

Kommentar vom 30.07.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.07.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.07.2010 um 16:46

@Pascal,

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

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.07.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.08.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.08.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 [...]
17. – CSS: border-collapse "deaktiviert" border-radius | perun.net

Pingback vom 14.10.2010 um 17:06

[...] Schreiben im WordPress-Editor abgerundete Ecken zu spendieren, so wie ich es schon hier im Artikel CSS3 und abgerundete Ecken beschrieben [...]
18. – Michael

Kommentar vom 13.01.2011 um 10:35

Schade, dass es bestimmt noch einige Zeit dauern wird, bis es sich als Standard durchgesetzt hat.
19. – jimmy

Kommentar vom 26.01.2011 um 18:19

Hi Vladimir,

das klingt alles super! Leider habe ich absolut keine Ahnung von CSS und weiß demensprechend nicht, wo ich den CSS Code den du oben geposted hast einbauen muss. Ich habe hier mal einen Screenshot gemacht, die rot markierten Bereiche möchte ich auf jedenfall abrunden, die grünen evtl., mal schauen.

Wäre schön wenn du mir helfen kannst

Gruß jimmy

Screenshot: http://d.pr/soTO
20. – Hans

Kommentar vom 04.02.2011 um 20:57

Im IE 9 werden die abgerundeten Ecken angezeigt. Opera und Firefox machen auch keine Probleme. Aber man sollte auch runde Ecken vermeiden, da eine Webseite schnell verspielt aussieht.
21. – Viktor Dite

Kommentar vom 10.02.2011 um 10:24

Für Alle die sich das nicht merken wollen / können

http://border-radius.com/
22. – Tom

Kommentar vom 10.02.2011 um 11:18

@Hans: meine Seite ist doch nicht verspielt! Das muss so!
Der FF4 kennt auch schon "border-radius" und bewertet es sogar stärker als die "-moz-"-Variante. Hab ich grad gemerkt, also meine Seite in FF 3.6 und 4 unterschiedlich aussah.
23. – Top-15-Artikel im ersten Halbjahr 2011 | WordPress & Webwork

Pingback vom 19.06.2011 um 17:30

[...] CSS3 und abgerundete Ecken Abgerudnete Ecken halt. [...]
24. – Stephan Gröschler

Kommentar vom 17.11.2011 um 21:52

Toller Artikel, der mir sehr geholfen hat.

Da ich aber in der Sidebar (für die ich die Rahmen gerne verwenden würde) unterschiedlich hohe Kästen habe, hätte ich gerne gewusst, ob man auch angeben kann, dass die Höhe variabel ist, sich also dem Text anpasst.

Grüße
25. – Viktor Dite

Kommentar vom 17.11.2011 um 21:56

das ist doch reines CSS, die Höhe / Breite ist doch total variabel?!?!
26. – CSS3 im praktischen Einsatz | WordPress & Webwork

Pingback vom 28.11.2011 um 16:08

[...] werden u.a. abgerundete Ecken, Schatten für Boxen und Text, Content-Generierung und [...]
27. – Linkchecker, Buton mit CSS3, neue Cursors in CSS3 | WordPress & Webwork

Pingback vom 14.01.2012 um 14:08

[...] einfaches, aber dennoch einen sehr ansehnlichen Button stylen kann. Dabei wird unter anderem auf abgerundete Ecken, Box-Schatten und Transitionen [...]

Hinweis:
300+ Professionelle WordPress-Themes
Premium WordPress-Themes, 38 davon mit deutschem Support

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.

1. – krisz

Kommentar vom 29.07.2010 um 14:49

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

2. – Torsten

Kommentar vom 29.07.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.07.2010 um 15:46

Schöne sache das ganze, danke sehr

4. – Oliver Rumpf

Kommentar vom 29.07.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.07.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.07.2010 um 20:23

Grafik-Geschnetzeltes

7. – nico

Kommentar vom 29.07.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.07.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.07.2010 um 21:22

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:

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

10. – Perun

Kommentar vom 30.07.2010 um 00:45

@krisz,

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

11. – Sven

Kommentar vom 30.07.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.07.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.07.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.07.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.08.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.08.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 [...]

17. – CSS: border-collapse "deaktiviert" border-radius | perun.net

Pingback vom 14.10.2010 um 17:06

[...] Schreiben im WordPress-Editor abgerundete Ecken zu spendieren, so wie ich es schon hier im Artikel CSS3 und abgerundete Ecken beschrieben [...]

18. – Michael

Kommentar vom 13.01.2011 um 10:35

Schade, dass es bestimmt noch einige Zeit dauern wird, bis es sich als Standard durchgesetzt hat.

19. – jimmy

Kommentar vom 26.01.2011 um 18:19

Hi Vladimir,

das klingt alles super! Leider habe ich absolut keine Ahnung von CSS und weiß demensprechend nicht, wo ich den CSS Code den du oben geposted hast einbauen muss. Ich habe hier mal einen Screenshot gemacht, die rot markierten Bereiche möchte ich auf jedenfall abrunden, die grünen evtl., mal schauen.

Wäre schön wenn du mir helfen kannst

Gruß jimmy

Screenshot: http://d.pr/soTO

20. – Hans

Kommentar vom 04.02.2011 um 20:57

Im IE 9 werden die abgerundeten Ecken angezeigt. Opera und Firefox machen auch keine Probleme. Aber man sollte auch runde Ecken vermeiden, da eine Webseite schnell verspielt aussieht.

21. – Viktor Dite

Kommentar vom 10.02.2011 um 10:24

Für Alle die sich das nicht merken wollen / können

http://border-radius.com/

22. – Tom

Kommentar vom 10.02.2011 um 11:18

@Hans: meine Seite ist doch nicht verspielt! Das muss so!
Der FF4 kennt auch schon "border-radius" und bewertet es sogar stärker als die "-moz-"-Variante. Hab ich grad gemerkt, also meine Seite in FF 3.6 und 4 unterschiedlich aussah.

23. – Top-15-Artikel im ersten Halbjahr 2011 | WordPress & Webwork

Pingback vom 19.06.2011 um 17:30

[...] CSS3 und abgerundete Ecken Abgerudnete Ecken halt. [...]

24. – Stephan Gröschler

Kommentar vom 17.11.2011 um 21:52

Toller Artikel, der mir sehr geholfen hat.

Da ich aber in der Sidebar (für die ich die Rahmen gerne verwenden würde) unterschiedlich hohe Kästen habe, hätte ich gerne gewusst, ob man auch angeben kann, dass die Höhe variabel ist, sich also dem Text anpasst.

Grüße

25. – Viktor Dite

Kommentar vom 17.11.2011 um 21:56

das ist doch reines CSS, die Höhe / Breite ist doch total variabel?!?!

26. – CSS3 im praktischen Einsatz | WordPress & Webwork

Pingback vom 28.11.2011 um 16:08

[...] werden u.a. abgerundete Ecken, Schatten für Boxen und Text, Content-Generierung und [...]

27. – Linkchecker, Buton mit CSS3, neue Cursors in CSS3 | WordPress & Webwork

Pingback vom 14.01.2012 um 14:08

[...] einfaches, aber dennoch einen sehr ansehnlichen Button stylen kann. Dabei wird unter anderem auf abgerundete Ecken, Box-Schatten und Transitionen [...]

CSS3 und abgerundete Ecken | perun.net