Schönere Webseiten mit CSS | CSS3 ermöglicht mit ein paar Zeilen CSS-Code runde Ecken für Boxelemente. Die Funktion liebe ich, weil ich damit schnell und unkompliziert Webseiten einen eleganteren Look geben kann. Dazu sind lediglich ein paar Zeilen Code nötig (siehe weiter unten). Aber weil das Ganze eine CSS3-Spezifikation ist, funktioniert sie nur in wirklich modernen Browsern: Mozila/Firefox und Safari 3. Ein kleines jQuery-Plugin verspricht Abhilfe.

Runde Ecken für Boxelemente mit CSS3

.box-runde-ecken {
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
}

Runde Ecken mit jQuery Corners

Wenn man in seine Webseiten Krücken einbaut, sollte man immer vorsichtig sein. Die wichtigste Frage lautet: Ist die Krücke auch abwärtskompatibel? Funktioniert die Webseite auch ohne Javascript? In diesem Falle ja. Laut "Hersteller" funktioniert das Plugin in den folgenden Browsern:

• iPhone
• Chrome
• Firefox
• Safari 2+
• Opera 9.0+
• Internet Explorer 6+

Natürlich kann man auf Runde Ecken verzichten. Mir gefallen abgerundete Elemente aber immer sehr gut, weil den Webseiten-Elementen etwas von ihrer Rechteckigkeit verlieren.

Wenn ich mir dann meine Statistiken anschaue, dann könnte sich der Einsatz von jQuery Corners 0.3 evtl. sogar lohnen. Der umständliche Bau von runden Boxen mit Hilfe von Hintergrundgrafiken würde dadurch auf jeden Fall wegfallen. Interessant auch, dass Firefox mittlerweile eine exzellente Verbreitung gefunden hat.

Website: jQuery Corners 0.3