Runde Ecken in CSS für alle Browser (auch IE!)

Heute beschäftige ich mich mal mit einem beliebten Thema, was vor allem seit CSS3 in aller Munde ist. Das Thema runde Ecken. Wir sehen sie überall, in allen Designs. Auch hier im neuen Design von net-developers, schaut mal oberhalb vom Content! Runde Ecken 🙂

Aber entgegen der üblichen Methoden habe ich hier mal was neues angewandt, was auch noch browserkompartibel ist.

Handelsübliche Methoden, um solch einen Effekt umzusetzen, sind z.B. Hintergrundbilder in png oder gif, wo die Ecken einfach transparent sind, die -moz-border-radius-Methode (Mozilla) und die -khtml-border-radius-Methode (für Konqueror und Safari). Heute beschäftige ich mich mit einer Alternative, die sogar der IE6 versteht!

Und so einfach gehts:

<div class="runde-ecken">
    <div class="b1">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b3">&nbsp;</div>
</div>

Zuerst bauen wir uns unsere HTML-Vorlage, dies wird nachher unser Rahmen mit den runden Ecken sein. Die Leerzeichen sind da drin, damit das Ganze auch im IE(6) funktioniert. Nun, der Trick ist ganz einfach, diese drei div-Boxen werden gleich die Illusion erzeugen, dass die Ecken Rund seien. und zwar mit diesem CSS-Schnipsel:

.runde-ecken {
	margin:auto;
	width:400px; /* Die Breite des ganzen */
	height:3px; /* Die Höhe des ganzen */
	font-size: 0px; /* für IE */
	line-height: 1px; /* für IE */
	min-height: 1px; /* für IE */
}
.runde-ecken .b1 {
	background:#000;
	height:1px;
	margin:0 2px;
}
.runde-ecken .b2 {
	background:#000;
	height:1px;
	margin:0 1px;
}
.runde-ecken .b3 {
	background:#000;
	height:1px;
	margin:0px;
}

Das Beispiel von oben sieht so aus:

Wie wir erkennen können, hat jede dieser div-Boxen eine Höhe von 1px bekommen und eine Länge von 400px vererbt bekommen. Wenn die gesamte Seite eine andere Breite als 400px hat, muss dieser Wert natürlich angepasst werden. Die unterste hat die volle Breite, die zweite hat einen Außenabstand von 1px nach links und nach rechts, und die dritte 2px. Die Hintergrundfarbe dieser 1px-Linie entspricht dann noch der Rahmenfarbe. So entsteht eine kleine Pyramide. das Ganze könnten wir jetzt noch beliebig oft wiederholen, sooft eben, wie die Illusion erweckt werden soll, dass der Rahmen dick ist und die runden Ecken „runder“. Dabei solltet ihr am besten danach schauen, wie dick der Rahmen schlussendlich ist, und da das Live-Beispiel hier unsere Webseite ist habe ich nur 3 genommen (da der Rahmen an den Sieten auch 3px breit ist).

So das war schon der ganze Trick! Man könnte das Ganze auch noch spiegelverkehrt für den unteren Rand seiner Webseite machen z.B. so, hier mal ein etwas „aufwändigeres“ Beispiel, wo ich mich nicht an der Rahmendicke aufgehalten habe, da der Hintergrund des Contents auch Schwarz ist:

#content {
    color:#fff;
    width:398px;
    background-color:#000;
    margin:auto;
    border-left:solid 1px #000;
    border-right:solid 1px #000;
}
.runde-ecken {
	margin:auto;
	width:400px; /* Die Breite des ganzen */
	height:5px; /* Die Höhe des ganzen */
	font-size: 0px; /* für IE */
	line-height: 1px; /* für IE */
	min-height: 1px; /* für IE */
}
.runde-ecken .b1 {
	background:#000;
	height:1px;
	margin:0 5px;
}
.runde-ecken .b2 {
	background:#000;
	height:1px;
	margin:0 3px;
}
.runde-ecken .b3 {
	background:#000;
	height:1px;
	margin:0 2px;
}
.runde-ecken .b4 {
	background:#000;
	height:2px;
	margin:0 1px;
}
<div class="runde-ecken">
    <div class="b1">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b4">&nbsp;</div>
</div>
<div id="content">
Einfach mal was rumprobieren, sieht doch toll aus!
</div>
<div class="runde-ecken">
    <div class="b4">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b1">&nbsp;</div>
</div>

Und dieses Beispiel sieht so aus:

Sieht doch klasse aus! Und wirklich einfach, man muss nur wissen, wies geht!

Ich hoffe, euch hat der Artikel gefallen und wird euch in Zukunft helfen, tolle „runde Ecken“ zu basteln, die auch noch browserkompartibel sind! (Getestet in IE6,7 | FF | Opera | Safari | Chrome | Iron)

Euer Hydra

1 Star2 Stars3 Stars4 Stars5 Stars (8 Stimme, durchschnittlich 3,00 / 5)
Loading...


8 Kommentare zu “Runde Ecken in CSS für alle Browser (auch IE!)”

  1. Also der Trick ist schon alt, und diesen Workaround habe ich persönlich immer wieder verworfen, da er unnötigen Quellcode verursacht, egal mit welchen HTML-Element. Damit sind aber nicht nur runde Ecken möglich, sondern noch viel mehr.

    Nifty Corners: rounded corners without images (06.04.2005)
    WebBe: Runde Ecken –> Krazy Korners

  2. Da hast du sicherlich Recht! Es ist nichts neues, aber es ist trotzdem was was nicht unbedingt jeder kennt, und ich arbeite ganz gerne damit. Die 3-4 Divboxen mehr im Quellcode machens jetzt auch nicht. Für eine Seite die nur aus Artikel-Boxen mit runden Ecken besteht, würde ich das auch nicht so unbedingt empfehlen, weil sich dass dann doch summiert.
    Und ich denke jeder der das Prinzip verstanden hat, wird auch bemerkt haben dass man so unzählige Formen damit basteln kann 🙂

    Danke für deine weiteren Beispiele!
    .-= Hydra´s last blog ..Die beste AdSense-Position in Blogs =-.

  3. Hi,
    ich lass dir auch mal nen Kommentar hier. Prima Anleitung, ich will mehr runde Ecken im Web ! Werde es mal ausprobieren. Ich muss langsam schauen das ich meine Seite W3C Konform bekomme. Gruss Daniel
    .-= Daniel´s last blog ..Mahnung von online-downloaden.de =-.

  4. Hi, ab CSS 3 wird es endlich eine border radius Styleoption geben. Für einige Browser gibt es auch schon jetzt entsprechende CSS Tags: http://www.css3.info/preview/rounded-border/
    .-= Dominik (elexpress.de)´s last blog ..Neue Zimuse-Malware zerstört die Festplatte =-.

  5. Seeeeeeeeeehr geil! Danke für das kleine Tutorial!!!

  6. Eigentlich eine Schande, dass es das Styleelement noch nicht default im CSS gibt (mal sehen, ab wann CSS3 endlich Standard wird). Bis dahin sollte man aber auf kleine Grafiken ausweichen und nicht zu Fuß über die „div“s gehen. Vor allem, wenn man Farbverläufe etc. darstellen möchte.

  7. Nicht unbedingt neu… aber trotzdem eine nette Anleitung zum Erstellen von runden Ecken…
    .-= medani´s last blog ..HTML 5 – Vorschau =-.

  8. gitarrejoern on April 20th, 2012 at 02:29

    Moin!
    Das ist zwar ein klasse Tip, jedoch werden die meisten Elemente nicht mit festen px-Werten festgelegt, sondern mit em-Werten, welche die Größe nach den Browsereinstellungen des Betrachters generiert.
    Vielleicht hast du noch eine andere Idee mit em-Werten….

    Bis denne
    gitarrejoern

Hinterlasse einen Kommentar!

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

»Informationen zum Artikel

Autor: Hydra
Datum: 17.01.2010
Zeit: 23:09 Uhr
Kategorien: (x)HTML & CSS
Gelesen: 34786x heute: 3x

Kommentare: RSS 2.0.
Diesen Artikel kommentieren oder einen Trackback senden.

»Meta