CSS: Runde Ecken (Browserunabhängig)

Ich zeige euch hier wie man mit CSS ein Div Element darstellen kann, welches Runde Ecken hat. Für Firefox gibt es eine spezielle CSS Zeile, welche dies ohne weiteres ermöglicht:

-moz-border-radius:10px;

Das funktioniert natürlich nur im Firefox. Opera, IE und andere Browser ignorieren das komplett.

Mit 4 Grafiken und ein wenig CSS lässt sich das ganze aber auch für alle anderen Browser darstellen.

Der CSS Code dazu sieht folgendermaßen aus:

#round {
width:300px; /* Div Breite */
background: #FF9900 url(left_top.gif) top left no-repeat;
}
#round div {
background: url(right_top.gif) top right no-repeat;
}
#round div div {
background: url(left_bottom.gif) bottom left no-repeat;
}
#round div div div {
padding:20px; /* Innenabstand vom Text zum Div */
text-align:center; /* Text Ausrichtung */
font-family:Verdana; /* Schriftart */
font-size:12px; /* Schriftgröße */
background: url(right_bottom.gif) bottom right no-repeat;
}

Der HTML Code dazu sieht dann wie folgt aus:

<div id="round">
 <div>
  <div>
   <div>
Ein Div mit abgerundeten Ecken
</div>
 </div>
  </div>
   </div>

Wobei hier die Div Tags, welche sich innerhalb vom Haupt-Div befinden, nur dazu da sind um die Grafiken darzustellen, welche jetzt ins Spiel kommen.



Um die Grafiken zu speichern, einfach Rechte Maustaste -> Grafik speichern untern... Größe, Farbe, Radius ect. muss natürlich individuell angepasst werden. Dafür sollte man halt auch über ein paar Grafik-Kenntnisse verfügen (keine große Sache).

Das fertige Element sieht dann so aus:



Wie bereits erwähnt ist diese Technik vollkommen Browserunabhängig, was bedeutet dass es in jedem Browser funktioniert und nicht nur auf einen ganz bestimmten Browser beschränkt ist.

Tags: div runde ecken, div abgerundete ecken, css runde ecken, css abgerundete ecken