Abgerundete Ecken für DIV-Container mit CSS 3

Die Möglichkeit abgerundete Ecken per CSS zu definieren und damit auf absurde Verschachtelungen von DIV-Elementen mit Hintergrundbildern verzichten zu können war ein lange gehegter Wunsch aller Webentwickler. Mit CSS 3 gibt es nun das Handwerkszeug abgerundete Ecken mit ein paar Zeilen Code zu definieren. Vorteil, man erspart dem Nutzer Ladezeit und Suchmaschinen haben es leichter den Code der Webseite nach relevanten Keywords zu durchforsten.

So funktioniert es

Für border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius ist folgende Syntax vorgesehen:
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]

Moderne Browser unterstützen diese Angaben ohne weitere Ergänzungen, der Firefox benötigt jedoch den -moz- Präfix um abgerundete Ecken korrekt darzustellen.

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.