CSS border-radius – runde Ecken und Kreise

border-radius: Runde Ecken, auch Kofferecken, border radius, border bottom left radius, border bottom right radius, border top left radius, border top left radius

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, bei der alle vier Ecken des Elements im gleichen Maß abgerundet werden:

div#main { border-radius: 18px }

Ecken einzeln ansprechen

Zwei Werte für border-radius sprechen die linke obere und rechte untere (erster Wert) sowie die rechte obere und linke untere Ecke (zweiter Wert) der Box an.

border-radius:10px 25%;

Drei Werte runden die linke obere (erster Wert), die rechte obere und linke untere (zweiter Wert) und zuletzt die rechte untere Ecke (dritter Wert) an. border radius mit vier Werten folgt dem bekannten Muster von links oben im Uhrzeigersinn.

            oben rechts, unten links
                      +
   links oben ---+    |    +--- rechts unten
                 |    |    |
border-radius : 10px 25% 20px;

Schlüsselwörter für einzelne Ecken

Alternativ gibt es Eigenschaften für jede der vier Ecken einer Box.

  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-top-left-radius
  • border-top-right-radius
.elem {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
}

CSS border radius ist nicht erblich – d.h., Elemente, die innerhalb eines Elements liegen, für das ein 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

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 läßt sich animieren.

.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');
}
border-radius: Runde Ecken, auch Kofferecken border-radius