Abgerundete Ecken & runde Bilder mit border-radius

Abgerundete Ecken und runde Bilder mit border-radius in CSS

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:

border-radius - Abgerundete Ecken

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 diese kleine Anleitung weitergeholfen hat. 🙂

Anne Schwarz | Bloggerin

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, Pferdemädchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr über mich & die Bloghexe

Dieser Beitrag wurde bereits 9mal kommentiert - was denkst du?

Lies weiter:

HTML & CSS – jetzt kannst du loslegen

Na? Juckt es dir in den Fingern, endlich deinen ersten eigenen Code zu tippen? 🙂Auf geht’s! Im ersten Teil meiner Einführung in das Thema HTML & CSS hast du ja schon erfahren, wofür du die beiden Sprachen benötigst und wie sie generell aufgebaut sind. Heute geht’s weiter mit dem zweiten Teil der Basics: wo gibst […]

HTML & CSS – so einfach sind die Grundlagen

Wolltest du immer schon mal wissen, wie HTML & CSS eigentlich funktionieren? Hier erfährst du die Grundlagen. 🙂

9 Kommentare

  1. Gutes Tutorial! Zwei kleine Details: Man kann das Bild auch in einen quadratischen Container zwängen und border-radius: 100 würde reichen, da Breite/2 auch einen Kreis erzeugt 🙂

    • Ah, stimmt, die halbe Seitenlänge reicht auch… danke für den Hinweis! 🙂 Hab ich oben im Artikel gleich mal korrigiert.

      Wie meinst du das mit dem quadratischen Container? Das hat dann doch zur Folge, dass das Bild verzerrt wird?!

  2. Danke für das Tutorial, habe schon lange danach gesucht, bei den meisten ist es immer so kompliziert erklärt :-S Da ich mich noch nicht zu 100% auskenne ist das perfekt für mich erklärt 🙂

  3. Hii 😀 Ein super Tutorial nur bin ich leider zu blond..wo muss ich denn den Code einfügen damit meine Comment-Bilder wie bei dir zum Kreis werden? Ich habe da leider keine Ahnung ;/

    Dankeschön

    • Hej,
      wo du diesen CSS-Code einfügst, hängt davon ab, mit welchem System deine Webseite oder dein Blog läuft:

      • Bei Blogger gehst du auf Vorlage –> Anpassen –> Erweitert –> CSS hinzufügen.
      • Bei selbstgehosteten WordPress findest du das Stylesheet im Ordner wp-content/themes/dein-theme/style.css
      • Generell musstdu nach Dateien mit der Endung .css Ausschau halten

      Dort fügst du (am einfachsten am Ende) den Code ein – wie die Klassen der Bilder bei dir heißen, musst du vorher nachgucken und ggf. anpassen: ruf deine Seite auf, drücke Strg + U. Dann siehst du den Quellcode. Dort suchst du nach dem entsprechenden Bild und findest so die entsprechende Klasse heraus. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nichts mehr verpassen?

Abonniere meinen Newsletter, um über neue Inhalte benachrichtigt zu werden. Kostenlos & komfortabel direkt in deinen Posteingang! 🙂