Abgerundete Ecken & runde Bilder mit border-radius

Abgerundete Ecken für Elemente auf deinem Blog oder auch kreisrunde Fotos? Mit ein bisschen CSS ist das gar kein Problem!

Die Fotos, die aus deiner Speicherkarte purzeln, sind eckig. Auch HTML-Elemente wie etwa Buttons oder div-Container, mit denen du Boxen gestalten kannst, haben von Hause aus schnöde 90°-Ecken.
Das passt manchmal allerdings nicht so richtig zu deinem gewünschten Layout: sei es, dass du die Ecken ganz dezent abrunden magst, sei es, dass du deutliche Kurven hineinbringen möchtest – oder beispielsweise dein Profilfoto in der Sidebar ganz rund als Kreis darstellen magst.

Keine Sorge, du musst dafür weder zur Schere greifen, noch mühsam jedes einzelne Bild in Photoshop abrunden. Viel einfacher geht das mit CSS! 🙂

border-radius: eine runde Sache

Über die Eigenschaft border-radius kannst du einem Element, wie beispielsweise einem Div-Container oder eben einem Bild, abgerundete Ecken zuweisen:

.abgerundete-ecken {
     border-radius: 10px;
}

Der Pixelwert bestimmt, wie stark die Rundung ausfallen soll:

Wirf die Prefixes weg!

In der Vergangenheit warst du mit dieser einen Zeile leider noch nicht fertig. Denn wie das halt so ist – nicht jeder Browser unterstütze diese Anweisung für den border-radius. Daher waren für Firefox (-moz) sowie Safari und Chrome (-webkit) zwei weitere Angaben nötig, sogenannte Browser-Prefixes:

.abgerundete-ecken {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px
   border-radius: 10px;
}

Heutzutage kannst du die aber getrost weglassen.

Runde Bilder

Jetzt geht’s rund. 😉

Besonders bei kleineren Bildchen – etwa Profilbildern oder Thumbnails – kann es ein netter Effekt sein, sie kugelrund darzustellen. Hier im Blog setze ich diesen Effekt beispielsweise bei meinem Foto in der Autorenbox oder rechts in der Sidebar ein.

Dazu machen wir uns einfach einen kleinen Trick mit der Eigenschaft border-radius zunutze. Die Voraussetzung ist, dass unser Bild quadratisch ist.

Im Stylesheet weist du diesem nun abgerundete Ecken zu und setzt einen Wert ein, der halb so groß (danke @ Jonathan) ist wie die Seitenlänge der Grafik. Dann entsteht ein perfekter Kreis. 🙂

<img src="bild.jpg" alt="ein quadratisches Bild" class="kreis">

.kreis {
     border-radius: 50%;
}

Du kannst entweder einen Pixelwert angeben, der der Hälfte der Bildlänge bzw. -breite entspricht, oder einfach 50% verwenden. Damit bist du deutlich flexibler, falls du die Bildgröße mit CSS noch anpassen möchtest.

Nur einzelne Ecken abrunden

Jetzt gehen wir noch einen Schritt weiter und runden nicht mehr alle Ecken gleichmäßig ab, sondern nur einzelne. 🙂

Denn während border-radius alle Ecken adressiert, kannst du sie auch gezielt ansprechen:

Ich hoffe, dass dir diese kleine Anleitung weitergeholfen hat. 🙂