Abgerundete Ecken & runde Bilder mit CSS

6. Juli 2013- aktualisiert: 30. Dezember 2019 Bloggen 9 Kommentare

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;
}
CSS-Tutorial: abgerundete Ecken mit border-radius

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.

Lesetipp: Auf der regelmäßig aktualisierten Seite shouldiprefix.com kannst du nachsehen, für welche CSS-Angaben du noch Browser-Prefixes benötigst und welche überflüssig geworden sind.

Runde Bilder

Jetzt geht’s rund. 😉

CSS-Tutorial: runde Bilder mit border-radius
Mein Profilbild ist eigentlich eckig, dank CSS wird es kreisrund dargestellt

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:

border-top-left-radiusobere linke Ecke
border-top-right-radiusobere rechte Ecke
border-bottom-left-radiusuntere linke Ecke
border-bottom-right-radiusuntere rechte Ecke

Ich hoffe, dass dir dieses kleine Tutorial weitergeholfen hat. 🙂

Verwendest du bei dir im Blog abgerundete Ecken oder runde Bilder?

Zu diesen Themen gibt’s noch mehr Artikel:

Abgerundete Ecken & runde Bilder mit CSS

6. Juli 2013- aktualisiert: 30. Dezember 2019 Bloggen 9 Kommentare

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;
}
CSS-Tutorial: abgerundete Ecken mit border-radius

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.

Lesetipp: Auf der regelmäßig aktualisierten Seite shouldiprefix.com kannst du nachsehen, für welche CSS-Angaben du noch Browser-Prefixes benötigst und welche überflüssig geworden sind.

Runde Bilder

Jetzt geht’s rund. 😉

CSS-Tutorial: runde Bilder mit border-radius
Mein Profilbild ist eigentlich eckig, dank CSS wird es kreisrund dargestellt

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:

border-top-left-radiusobere linke Ecke
border-top-right-radiusobere rechte Ecke
border-bottom-left-radiusuntere linke Ecke
border-bottom-right-radiusuntere rechte Ecke

Ich hoffe, dass dir dieses kleine Tutorial weitergeholfen hat. 🙂

Verwendest du bei dir im Blog abgerundete Ecken oder runde Bilder?

Zu diesen Themen gibt’s noch mehr Artikel:

<