Runde Ecken mit CSS – ohne Bilder oder JavaScript!

Die meisten Webdesigner stehen wohl irgendwann einmal vor dem Problem der gerundeten Ecken. Manch einer versucht dann mit irgendwelchen Bildverschachtelungen oder gar JavaScript zu arbeiten, was den Quelltext meist proppevoll und sehr undurchsichtig macht. Von Barrierefreiheit, Browserunabhängigkeit und sonstigen Dingen auf die ich persönlich sehr viel Wert lege mal ganz abgesehen.

Doch es geht auch anders! Seht selbst…

Variante 1 für Runde Ecken mit CSS

Hier hat Stu Nicholls einen sehr interessanten Ansatz geliefert. Nämlich runde Ecken durch runde Listensymbole zu erzeugen, welche dann an alle 4 Ecken eines Containers angefügt werden.

CSS-Teil:

{code type=css}
.rundeecken {position:relative; width:300px; background:#39F; color:#000; margin:5em auto;}
#bull1, #bull2, #bull3, #bull4 {position:absolute; width:20px; height:20px; color:#39F; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#bull1 {top:0; left:0;}
#bull2 {bottom:0; left:0;}
#bull3 {top:0; right:0;}
#bull4 {bottom:0; right:0;}
.rundeecken em b {position:absolute; font-size:150px; font-family:arial; color:#39F; line-height:40px; font-weight:normal;}
#bull1 b {left:-8px;}
#bull3 b {left:-25px;}
#bull2 b {left:-8px; top:-17px;}
#bull4 b {left:-25px; top:-17px;}
.rundeecken p {position:relative; z-index:100; padding:10px 15px; font-size:11px;}
h1 {margin-top:25px;}
{/code}

HTML-Teil:
{code type=html}




Runde Ecken mit CSS ohne Imageswirklich geile sache!

{/code}

Hierdurch entstehen wirklich sauber gerundete Ecken und die Box lässt sich nach belieben anpassen.

Variante 2 – kürzer geht’s nicht

… zumindest nicht mit reinem CSS & HTML. Der Clou ist, über den Inhaltscontainer noch 4 weitere, einen (bis zwei) Pixel hohe Linien zu legen, die dann nach außen hin in ihrer Breite verkleinert werden:

CSS-Teil:
{code type=css}
.l1, .l2, .l3, .l4{font-size:1px; overflow:hidden; display:block;}
.l1 {height:1px; background:#39F; margin:0 5px; width:90px;}
.l2 {height:1px; background:#39F; margin:0 3px; width:94px;}
.l3 {height:1px; background:#39F; margin:0 2px; width:96px;}
.l4 {height:2px; background:#39F; margin:0 1px; width:98px;}
.inhalt {background:#39F; width:100px;}
.inhalt div {margin-left: 5px; width:95px;}
{/code}

HTML-Teil:
{code type=html}

Wieder runde ecken, box=100px


{/code}

Live-Demo Variante 2

Bei mir persönlich kommt meist Methode Nr. 2 zum Einsatz, da diese auch bei den meisten Browser korrekt dargestellt wird. Mit Sicherheit kennt ihr da draußen auch noch den Ein oder Anderen Kniff um runde Ecken mit CSS geschickt umzusetzen, lasst es mich wissen 😉

Über 

7 Responses to Runde Ecken mit CSS – ohne Bilder oder JavaScript!

  1. hype.yeebase.com sagt:

    Runde Ecken mit CSS – ohne Bilder oder JavaScript…

    Zwei Wege wie man auch ganz ohne Grafiken oder JavaScript-Zusatz schöne runde Ecken für seine Div-Container erzeugen kann….

  2. Tom sagt:

    Gibt es die Variante 2 auch irgendwo live zu sehen? 🙂

  3. Mark sagt:

    Eben aktualisiert. Nun auch eine Live-Demo online 😉

  4. Martin sagt:

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

  5. Mark sagt:

    @Martin: Du hast vergessen zu schreiben, dass das alles Funktionen sind, die von Mozilla, im Rahmen des kommenden CSS 3, entwickelt worden sind.

    Internet Explorer sowie Opera können mit diesen Anweisungen derzeit noch gar nichts anfangen.

    Die Funktionen selbst, gelten zudem auch (noch) nicht als valide CSS-Anweisungen gemäß dem W3C.

  6. Elroy sagt:

    Inzwischen versteht ja jeder aktuelle Browser border-radius.
    Damit sollte das Problem und der daraus resultierende Codewulst der Vergangenheit angehoeren.
    Bleibt nur noch zu sagen das runde Ecken eigentlich ein Widerspruch in sich sind. Ecken haben nunmal die Eigenschaft eckig zu sein.

  7. […] Runde Ecken mit CSS – ohne Bilder oder JavaScript! (435) […]

Schreibe einen Kommentar

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