CSS, HTML UND JAVASCRIPT MIT {STIL}

Die einfachste Form, runde Ecken für ein Element festzulegen, stellt die Kurznotation border-radius dar:

div#main { border-radius: 18px; }

CSS border-radius ist nicht erblich – d.h., Elemente, die innerhalb eines Elements liegen, für die border-radius vereinbart wurde, haben nicht automatisch ebenfalls abgerundete Ecken.

border-radius wird von allen modernen Browsern ohne Browser-Präfix unterstützt:

• Safari 5.0
• Firefox 4.0
• Chrome 11
• Internet Explorer 9

CSS border-radius

Erblich: Nein

Die Werte für border-radius können absolut in Pixeln oder relativ in em oder % angegeben werden. border-radius wirkt bei allen Arten von HTML-Boxen (auch bei Bildern), aber nicht bei table.

---

Mit der Angabe eines Werts für border-radius sind die Rundungen nach rechts und links gleich.

border-bottom-left-radius • border-bottom-right-radius • border-top-left-radius • border-top-right-radius

	
<div style="border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;"></div>

Mit der Angabe von zwei Werten entstehen unterschiedliche Radien.

<div style="border-bottom-left-radius: 40px 80px;
   border-bottom-right-radius: 40px 80px;
   border-top-left-radius: 40px 80px;
   border-top-right-radius: 40px 80px;"></div>