CSS, HTML und Javascript mit {stil}

CSS border-radius – runde Ecken und Kreise

border-radius: Runde Ecken, auch Kofferecken

border-radius rundet die Ecken von HTML-Boxen ab – eine Form, die auch also »Kofferecken« bezeichnet wird. Die CSS-Eigenschaft border muss nicht gesetzt werden, um Ecken durch border-radius abzurunden.

Mit border-radius gelingt dann auch endlich ein Kreis mit CSS ohne Hintergrundbild.

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

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 border-radius funktioniert nicht immer 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.

Kreise mit CSS border-radius

Wenn die Ecken nur rund genug sind, wird mit CSS border-radius ein Kreis aufgezogen – ganz ohne Hintergrundbild. Das Hintergrundbild in diesem Beispiel ist einfach ein viereckiges Muster.

.bo {width: 150px; height:150px; border-radius:50%; }
.boimg-1 {background: url(muster.png); border:10px solid lavender; }
.botext { margin-top:30%; text-align:center; }
<div class="bo boimg-1">
   <div class="botext">
      <h5>CSS3 transition</h5>
      <p>Animationen mit CSS</p>
   </div>
</div>
CSS3 transition

Animationen mit CSS

CSS3 border-radius

Endlich Kreise mit CSS

CSS3 filter

Filtereffekte mit CSS

border-radius für Tabellen

border-radius funktioniert sowohl bei table als auch mit td und th – allerdings nur so lang, wie kein border-collapse: collapse für die Tabelle festgelegt ist. Dann klappt es nicht mehr mit den runden Ecken für table, wohl aber für th- und td-Elemente.

AutorTitelOn-Leihe
Terry PratchettAb die Post201
Elisabeth von ArminBezaubernder April88
Jane AustenEmma600
Rebecca GableDas Spiel der Könige221
.withrc { border-collapse: collapse }
.withrc td, .notround th { border-bottom:1px solid tomato; padding:6px}
.withrc th { background-color: tomato; color:white;}
.withrc th:first-child { border-top-left-radius: 8px}
.withrc th:last-child { border-top-right-radius: 8px}

Wenn die Tabelle selber mit border-radius versehen werden soll, ist jede Menge Schreibarbeit in der CSS-Datei fällig: HTML table mit border-radius und border-collapse.

border-radius animieren

border-radius gehört zu den CSS-Eigenschaften, die sich animieren lassen.

.animate { 
   background:url(pattern.png);
   transition: border-radius 2s ease;
}

.roundup {
   border-radius: 50%;
}

Hier per Script für mouseover und touch animiert:

var animate = document.querySelector('.animate');
animate.onmouseover = animate.ontouch = function () {
   animate.classList.toggle('roundup');
}
animate.onmouseout = animate.ontouchend = function () {
   animate.classList.toggle('roundup');
}