Tegget.de | Die Blog-Gemeinschaft

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 – die kreative

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:

.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;}

HTML-Teil:

<div class="rundeecken">
<em id="bull1"><b>•</b></em>
<em id="bull2"><b>•</b></em>
<em id="bull3"><b>•</b></em>
<em id="bull4"><b>•</b></em>
  <h1>Runde ecken mit CSS ohne Images</h1>
  <p>wirklich geile sache!</p>
</div>

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:

.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;}

HTML-Teil:

<b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
    <div class="inhalt">
        <div>Wieder runde ecken, box=100px</div>
    </div>
<b class="l4"></b><b class="l3"></b><b class="l2"></b><b class="l1"></b>

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