Runde Ecken mit CSS

Mit CSS sind Rundungen möglich. Mittels der border-Eigenschaft und der Mozilla-CSS Eigenschaft -moz-border-radius können Rundungen gerendert werden. Im aktuellen Firefox 3 (FF3) werden die Kanten weich gezeichnet und besitzen fast keinen Treppeneffekt mehr.

CSS Border-radius - runde Ecken

CSS Border-radius - runde Ecken

INFORMATION: Dieser Artikel ist 4 Jahre alt und damit nicht mehr Up-to-date. Das Update befindet sich hier: border-radius, Runde Ecken mit CSS.

In diesem ersten Webdesign Tutorial stelle ich die Möglichkeiten des moz-border-radius vor. Zu beginn klären wie aber noch die immer wieder auftauchenden Browserfragen und mögliche Lösungsansätze.

Internet Explorer macht keine runden Ecken, was passiert?

Die moz-border-radius CSS Eigenschaft wurde von Mozilla eingeführt. Der Internet Explorer hat allerdings einen hohen Marktanteil. Keine Angst! Für Internet Explorer Nutzer werden die runden Ecken einfach nicht dargestellt. Diese erhalten einfach normal spitze Ecken, da unbekannte Eigenschaften einfach rausgelassen werden und das Design nicht weiter beeinflussen.

Lösungen für nicht-Mozilla Browser?

Auf selfHTML/CSS werden runde Ecken vorgestellt, die mit Bildern und relativ viel lastigen Code selbstgebaut werden. Dies ist durchaus eine Alternative, allerdings stört das viele Designer, da es nicht die schönste Art ist. Denn dabei liegen verschiedene HTML-Elemente ineinander und es müssen mindestens 2 Grafiken geladen werden.

Runde Ecken mit moz-border-radius

Um natürlich auch nicht-Mozilla Nutzer zu zeigen, wie runde Ecken im Firefox aussehen, füge ich ein [s]Screenshot meiner Programmierung ein[/s].

Runde Ecken mit CSS - Beispiele

Nun wollen wir natürlich wissen, wie das ganze funktioniert. Die Boxen sehen schonmal ganz gut aus. Zwar ist der Padding-Wert in den Rundungen nicht wirksam, aber Kompromisse muss man wohl auch eingehen. Sehr individuell jedenfalls. Auch eine Hintergrundfarbe ist natürlich möglich. Im Beispiel wurde ein roter border (Rahmen) von 3 Pixel Dicke gewählt.

Gleicher Radius auf allen 4 Ecken
-moz-border-radius: 20px;

Radius oben 10 Pixel, unten 30 Pixel
-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomleft: 30px;-moz-border-radius-bottomright: 30px;</code><strong>Radius von 20 Pixel nur unten</strong><code>-moz-border-radius-bottomleft: 20px;-moz-border-radius-bottomright: 20px;</code><strong>Radius in Blattform</strong><code>-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 30px;-moz-border-radius-topright: 30px;

Komplettes Beispiel mit HTML und CSS Code

CSS Code:
#rund1{border:3px solid red;width:240px;height:70px;text-align:center;-moz-border-radius: 20px;}#rund2{border:3px solid red;width:240px;height:70px;text-align:center;-moz-border-radius-bottomleft: 20px;-moz-border-radius-bottomright: 20px;}#rund3{border:3px solid red;width:240px;height:70px;text-align:center;-moz-border-radius-top: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomleft: 30px;-moz-border-radius-bottomright: 30px;}#rund4{border:3px solid red;width:240px;height:70px;text-align:center;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 30px;-moz-border-radius-topright: 30px;}

HTML Code:
<div id="rund1">Beispiel: alle Ecken gleich rund</div><br /><div id="rund2">Beispiel: nur untere Ecken rund</div><br /><div id="rund3">Beispiel: obere Ecken rund mit 10px Radius, untere Ecken mit 30px Radius abrunden</div><br /><div id="rund4">Beispiel: alle Ecken abrunden, in Blattform</div>