CSS border-radius – runde Ecken und Kreise

CSS border-radius – abgerundete Ecken

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

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

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ecken abrunden

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 }

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

border-radius mit zwei / drei Werten

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
top left
top right
bottom left
bottom right
.elem {
	border-top-left-radius: 0%;
	border-top-right-radius: 0%;
	border-bottom-left-radius: 0%;
	border-bottom-right-radius: 0%;
}

Mit Prozentangaben entsteht ab 50% für alle vier Ecken eine Ellipse, mit höheren Werte beeinflussen sich die Radien gegenseitig. Mit Angaben in px würde bei 50% der Höhe (in diesem Beispiel 60px) die abgerundete Form eines Buttons entstehen.

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 horizontal / vertikal

Wenn Werte vor und nach einem Slash / notiert werden, steht der Wert vor dem Slash für den horizontalen Radius und die Werte nach dem Slash für den vertikalen Radius.

W3C: Curve Radii: the border-radius properties

.freeform {
	border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
	background-color: orange;
	width:200px;
	height:200px;
}

Die Form braucht Breite und Höhe, damit border-radius eine Wirkung zeigt.

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. Wenn die eckige Box rund werden soll:

Das Eckige muss in das Runde, das Runde in das Eckige
.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');
}