Über die Frage ob runde Ecken im Webdesign nun wirklich notwendig sind oder nicht lässt sich zweifellos streiten. Darüber als Ausrede den Mehraufwand bei der HTML- & CSS-Realisierung aufzuführen jedoch nicht!

curvyCorners bietet für solche Zwecke eine kinderleichte Möglichkeit je nach Bedarf sämtliche HTML-Blockelemente mit runden Ecken zu versehen. Mittels Javascript wird hier der jeweiligen Style des div-Elements ausgelesen und ermittelt ob ein Border-Style zugewiesen wurde; falls ja wird dieser bei der Abrundung sauber miteinbezogen.

Möglichkeiten der Einstellung:

<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 20 }, // RADIUS OBEN LINKS
tr: { radius: 20 }, // RADIUS OBEN RECHTS
bl: { radius: 20 }, // RADIUS UNTEN LINKS
br: { radius: 20 }, // RADIUS UNTEN RECHTS
antiAlias: true, // KANTENGLÄTTUNG?
autoPad: false // AUTO PADDING?
}
// Nachfolgend die Zuordnung eines Styles:
var divObj = document.getElementById(”myDiv”);
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>

Weitere Infos & ein ausführliches Tutorial zur Nutzung gibt es hier.
Und so sieht es aus: Demo 1, Demo 2