Abgerundete Ecken sind eine beliebte Methode, um deinem Webdesign das gewisse Etwas zu ver­leihen. Wie du ja hier bei Elmastudio sehen kannst, sind wir große Fans von abge­run­deten Ecken ;-) Hier meine kleine Über­sicht, über ver­schie­dene Möglichkeiten, abge­run­dete Ecken für dein Web-Layout zu erstellen.

1. neue Möglichkeiten mit CSS3

Die neuen Möglichkeiten von CSS3 werden der­zeit unter Webdesignern heiß dis­ku­tiert. Die Möglichkeit von abge­run­deten Ecken ganz allein mit CSS Styles gehört u.a. zu den neuen Features.

Die Methode ist simpel. Füge deinem div ein­fach die fol­genden CSS Styles hinzu:

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Diese Methode ist fan­tas­tisch simpel und der Code sauber, doch wie könnte es anders sein, hat sie natür­lich einen Haken. Leider wird diese Methode nicht von Internet Explorer und älteren Versionen anderer Browser unterstützt.

Wenn die abge­run­deten Ecken für dein Design nicht unbe­dingt not­wendig sind, und du mit der Option, ist diese neue Methode aber sicher­lich eine tolle Option.

Noch mehr Infos über die neuen Möglichkeiten und Highlight von CSS3 kannst du auch in dem Artikel »11 Classic CSS Techniques Made Simple with CSS3« bei Nettuts nach­lesen. Die neusten Infos und Diskussionen rund um das Thema CSS3, fin­dest du außerdem auf der Webseite www.css3.info.

2. abge­run­dete Ecken mit Javascript

Eine wei­tere ein­fach, und vor allem Browser-kompatible Methode, um abge­run­dete Ecken zu erzeugen, ist die Möglichkeit das Javascript zu ver­wenden.
Downloade dir dazu ein­fach die aktu­elle Version von Jquery und das Javascript-Plugin Corners, und rufe beides im Head-Bereich deines Codes auf.

Füge dann noch für die ent­spre­chende div-class diese Funktion ein:

<script type="text/javascript"> $(function(){ $('.box').corners('10px'); }); </script>

Diese Methode funk­tio­niert natür­lich nur, wenn der Betrachter Javascript zuge­lassen hat. Ansonsten werden, wie auch bei der CSS3 Methode, nor­male Ecken angezeigt.

3. abge­run­dete Ecken mit CSS und Images

Falls du ganz sicher gehen möch­test, dass deine abge­run­deten Ecken in allen Browsern (auch älteren Version von IE) ange­zeigt werden, ist diese Methode wohl der­zeit die ein­zige Option.

Zuerst erstellt du vier Images deiner abge­run­deten Ecken mit Photoshop oder Fireworks als Vorlage. Diese Vorlagenbilder setzt du dann als Background-Image in deine CSS Styles ein.

Der Vorteil, dieser Methode ist, dass du die vor­be­rei­teten Ecken auf ver­schie­dene Flächen mit unter­schied­li­cher width und height (also Länge und Breite) anwenden kannst.

Bist du sicher, dass du die Ecken nur in einer Größe benö­tigst, kannst du auch nur zwei Vorlagenbilder (eines für die oberen zwei Ecken, eines für die unteren zwei) erstellen.
Eine aus­führ­liche Beschreibung dieser Methode kannst du dir auch in dem Screencast-Video bei CSS-Tricks anschauen. Chris Colyier erklärt hier alle Methoden, um abge­run­dete Ecken zu erstellen, noch einmal ganz ausführlich.

Welche Methode ver­wen­dest du am liebsten, um abge­run­dete Ecken in deinem Webdesign dar­zu­stellen? Hast du wei­tere inter­es­sante Tipps zum Thema abge­run­dete Ecken? Dann schreib mit doch einen Kommentar, ich freue mich schon auf dein Feedback.