CSS Vorlage für Rahmen mit runden Ecken

[StruppiMac]

Hi,

ich suche nach ner CSS Vorlage für solche Rahmen mit runden Ecken, wie man sie in letzter Zeit häufig sieht.

zb der weiße Content-Bereich http://www.elixirgraphics.com/themes/sprout/index.html

oder eher der Content-Bereich von
http://www.apple.com/imac/design/
Also da wo es mit "And this isn't even its best side" losgeht

Weiß da jemand zufällig eine Quelle?

Gruß + danke

 

[MaxED9]

Die runden Ecken sind Hintergrundgrafiken (Bespiel Elixir, Beispiel Apple).
In den genannten Beispielen sind sie nicht skalierbar, also auch recht simple zu reproduzieren.
Es gibt ein eigenes DIV für die 'Oberkante', darauf mit etwas oberen Abstand zur Oberkante, kommt dann das eigentliche Inhalts-DIV, was ebenfalls mit einer Hintergrundgrafik versehen wird, so dass es eben wie eine Fläche mit runden Ecken aussieht.

Bei Selfhtml (im übrigen das erste Suchergebnis wenn man nach 'css runde ecken' sucht) gibt es ein skalierbares Beispiel

 

[Atarimaster]

Für abgerundete Ecken bevorzuge ich Nifty Corners Cube.

Vorteile:
– Kommt ohne Hintergrundgrafiken aus (welche ich konzeptionell für ziemlich… öhhmm… kritisch halte);
– Ermöglicht sauberes, gut strukturiertes Markup und erzeugt nicht so eine div-Suppe wie das Selfhtml-Beispiel. Mal ehrlich: Fünffach verschachtelte div-Container… da kann man ja gleich beim Tabellenlayout bleiben.

Nachteil:
Nifty benötigt JavaScript. Das ist in diesem Fall meiner Meinung nach aber durchaus vertretbar, denn für Besucher ohne JavaScript gibt es nur einen Unterschied: Sie sehen keine abgerundeten, sondern eben »eckige Ecken«. Das kann man gut und gerne verschmerzen.

 

[/aquila]

sonst das hier, läuft aber nicht in allen Browsern