Abgerundete Ecken sind eine beliebte Methode, um deinem Webdesign das gewisse Etwas zu verleihen. Wie du ja hier bei Elmastudio sehen kannst, sind wir große Fans von abgerundeten Ecken ;-) Hier meine kleine Übersicht, über verschiedene Möglichkeiten, abgerundete Ecken für dein Web-Layout zu erstellen.

1. neue Möglichkeiten mit CSS3

Die neuen Möglichkeiten von CSS3 werden derzeit unter Webdesignern heiß diskutiert. Die Möglichkeit von abgerundeten Ecken ganz allein mit CSS Styles gehört u.a. zu den neuen Features.

Die Methode ist simpel. Füge deinem div einfach die folgenden CSS Styles hinzu:

[php]
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
[/php]

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

Wenn die abgerundeten Ecken für dein Design nicht unbedingt notwendig sind, und du mit der Option, ist diese neue Methode aber sicherlich 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 nachlesen. Die neusten Infos und Diskussionen rund um das Thema CSS3, findest du außerdem auf der Webseite www.css3.info.

2. abgerundete Ecken mit Javascript

Eine weitere einfach, und vor allem Browser-kompatible Methode, um abgerundete Ecken zu erzeugen, ist die Möglichkeit das Javascript zu verwenden.
Downloade dir dazu einfach die aktuelle Version von Jquery und das Javascript-Plugin Corners, und rufe beides im Head-Bereich deines Codes auf.

Füge dann noch für die entsprechende div-class diese Funktion ein:

[php]
<script type="text/javascript"> $(function(){ $(‚.box‘).corners(’10px‘); }); </script>
[/php]

Diese Methode funktioniert natürlich nur, wenn der Betrachter Javascript zugelassen hat. Ansonsten werden, wie auch bei der CSS3 Methode, normale Ecken angezeigt.

3. abgerundete Ecken mit CSS und Images

Falls du ganz sicher gehen möchtest, dass deine abgerundeten Ecken in allen Browsern (auch älteren Version von IE) angezeigt werden, ist diese Methode wohl derzeit die einzige Option.

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

abgerundete Ecken mit CSS

Erstelle eine Bildvorlage deiner vier Ecken in Photoshop.

Der Vorteil, dieser Methode ist, dass du die vorbereiteten Ecken auf verschiedene Flächen mit unterschiedlicher 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 ausführliche Beschreibung dieser Methode kannst du dir auch in dem Screencast-Video bei CSS-Tricks anschauen. Chris Colyier erklärt hier alle Methoden, um abgerundete Ecken zu erstellen, noch einmal ganz ausführlich.

Welche Methode verwendest du am liebsten, um abgerundete Ecken in deinem Webdesign darzustellen? Hast du weitere interessante Tipps zum Thema abgerundete Ecken? Dann schreib mit doch einen Kommentar, ich freue mich schon auf dein Feedback.