CSS border-radius – runde Ecken und Kreise

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

.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>CSS transition</h5>
      <p>Animationen mit CSS</p>
   </div>
</div>

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.

.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:

.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');
}