css: runde Ecken

Heute habe ich lange mit Photoshop darum gerungen, klare runde Ecken, ohne weiche Kante, ohne irgendwelche Effekte in einen Sprite zu packen um damit winzige Tabs mit runden Ecken zu erzeugen. Über einen Podcast stieß ich zu Stu Nicholls und seinen css-Spielereien. Neben der im Podcast erklärten Methode, die sich eher für Rundungen mit kleinem Radius eignet, wird dort auch eine Methode für riesige Radien gezeigt:

Die Ecke ist der Punkt

man positioniert in jede Ecke einer Box einen Punkt •.
Die Größe des Punktes bestimmt den Radius der Ecke. Der Content-Bereich liegt mit einem höheren z-index über den Punkten. Die Box wächst problemlos in alle Richtungen, allein durch eine Zeile css lassen sich Hintergrundfarbe und Radius der Ecken ändern. Damit schlägt sie die Schwachstellen meiner Lösung mit Background-Grafiken.
Wahnsinn.

Advertisements