Hallo Mel,
wie eine skalierbare box mit runden ecken auf herkömmlichen wege (css und html ;) zu erstellen ist ist bekannt, die vielen ineinander verschachtelten blockelemente sind allerdings auch nicht gerade der traum. deshalb die nachfrage nach einer JS-Lösung.
Du könntest allen Browsern nachhelfen, die weder border-radius noch etwas Entsprechendes verstehehen, indem du von allen Elementen der Klasse die die gerundeten Ecken darstellen soll, über cloneNode zunächst eine identische Kopie erstellst, in einer For-Schleife über einen Vergleich zwischen this und childNodes[i] deren Position im jeweiligen Mutterelement ermittelst und das Original über replaceChild mit der Kopie ersetzt, um die du zuvor über createElement und appendChild weitere Vorfahrenselemente geschachtelt hast, die die Hintergrundgrafiken über entsprechende Klassennamen beherbergen.
Auf Glättung an den Ecken wirst du dabei aber verzichten müssen, denn du weißt ja nie, vor welchem Hintergrund sie zu stehen kommen.
Dieses Vorgehen, wenn man den Aufwand denn überhaupt betreiben will, hätte den Vorteil, dass der ausgelieferte HTML-Quellcode für nicht-visuelle Ausgabemedien und solche in denen Javascript nicht zum Tragen kommt, deutlich schlanker und übersichtlicher bliebe.
Gruß Gernot
super me