CSS3: border-radius

Ab jetzt wird es hier immer mal wieder ein paar nützliche CSS Artikel geben. Anfangen werde ich heute mit der CSS3 Eigenschaft border-radius.

Border-radius ist wohl eine der nützlichsten Eigenschaften, die CSS3 mit sich bringt. Es ermöglicht uns, die Ecken von Beispielsweise einem div-Container abzurunden. Um das einmal zu verdeutlichen, habe ich hier ein normales div und eins mit einer abgerundeten Ecke.

Das CSS für das Div mit abgerundeten Ecken sieht so aus:

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
[/css]

Nachdem wir nun wissen, wie wir die Ecken abrunden können, möchte ich euch hier zeigen, was mit dieser Eigenschaft so alles möglich ist. Ich werde hier immer nur ein Quadrat als Grundform benutzen. Mit einem Rechteck sind natürlich auch noch andere Variationen möglich, wie ihr zum Beispiel oben im Header meiner Seite sehen könnt.

Aus eckig mach rund

Kreis

Kreise haben im Webdesign, vor allem im letzten Jahr, massiv an Beliebtheit zugenommen. Dank CSS3 und dem border-radius kann man sich an dieser Stelle die Grafik sparen und einen beliebig großen Kreis mit CSS bauen.

Hier das CSS zu dem Kreis:

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-webkit-border-radius: 300px 300px 300px 300px;
-moz-border-radius: 300px 300px 300px 300px;
border-radius: 300px 300px 300px 300px;
[/css]

Halbkreis

Auch Halbkreise stellen kein Problem mehr da. Damit lassen sich zum Beispiel schöne Navigationen bauen.

Hier das CSS zu dem Halbkreis:

[css]
background: #21A3D6;
height: 75px;
width: 150px;
-webkit-border-radius: 0px 0px 300px 300px;
-moz-border-radius: 0px 0px 300px 300px;
border-radius: 0px 0px 300px 300px;
[/css]

Ein Kreis mit einer Ecke

Wenn man diese Form mit CSS3 Transform ein bisschen dreht, könnte man daraus zum Beispiel einen Wassertropfen machen.

Hier das CSS zu dem Kreis mit einer Ecke:

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-webkit-border-radius: 0px 300px 300px 300px;
-moz-border-radius: 0px 300px 300px 300px;
border-radius: 0px 300px 300px 300px;
[/css]

Ein Viertel-Kreis

Ein wirklich gutes Beispiel, wo man so eine Form gebrauchen könnte, fällt mir gerade nicht ein. Auf jeden Fall ist es kein Problem einen Viertel-Kreis abzubilden, wenn man ihn denn mal braucht. 😉

Hier das CSS zu dem Viertel-Kreis:

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-webkit-border-radius: 0px 0px 300px 0px;
-moz-border-radius: 0px 0px 300px 0px;
border-radius: 0px 0px 300px 0px;
[/css]

Eine andere Form

Dieses Element kommt zum Beispiel oben links im Header dieser Seite zum Einsatz.

Hier das CSS zu dieser Form:

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-webkit-border-radius: 0px 300px 0px 300px;
-moz-border-radius: 0px 300px 0px 300px;
border-radius: 0px 300px 0px 300px;
[/css]

Die Browser-Präfixe

Das elendige Problem der veralteten Browser. Besonders beim Einsatz von CSS3 muss man sehr aufpassen, dass auch alles richtig dargestellt wird. Border-Radius ist glücklicherweise in allen aktuellen Browsern benutzbar. Trotzdem sollte man nicht vergessen auch die Browser-Präfixe anzugeben. Diese können zum Beispiel so aussehen:

[css]
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
[/css]

Browser-Unterstützung

Auch immer wieder interessant ist, wie diese Eigenschaften von den verschiedenen Browser unterstützt werden. Ich möchte mich hier kurz fassen. Alle aktuellen Browser unterstützen border-radius. Im Internet-Explorer 6/7/8 gibt es keine Runden Ecken. Entweder ihr verzichtet hier auf die Rundungen oder ihr müsst in euren IE-Fixes halt Grafiken einbauen.

Ich für meinen Teil habe hier auf der Seite keine IE-Fixes im Einsatz. Aus Prinzip. In meinem Blog kann ich das machen. Auf großen Websites oder bei Kunden muss dies natürlich abgesprochen werden und ein brauchbarer Kompromiss gefunden werden.

Für eine Übersicht über die unterstützten Browser, könnte ihr euch auf caniuse.com die vollständige Tabelle ansehen.

Was man auch noch wissen sollte

Es gibt außerdem die Möglichkeit jede Ecke einzeln anzusprechen. Beispielsweise mit border-top-left-radius kann man die Ecke oben links ansprechen. Auf diese Weise kann man noch mehr Einfluss auf die Rundung nehmen.

[css]
background: #21A3D6;
height: 150px;
width: 150px;
-moz-border-radius-topleft: 80px 30px;
-webkit-border-top-left-radius: 80px 30px;
border-top-left-radius: 80px 30px;
[/css]

Hier solltet ihr bei den Präfixen darauf achten, dass die vom FireFox anders aufgebaut sind. Ich hoffe das System dahinter ist klar geworden. Falls ihr hierzu noch mehr Informationen braucht, könnt ihr diese auch noch auf CSS3.info nachlesen.