Tutorial: abgerundete Ecken und runde Bilder mit CSS

Abgerundete Ecken & runde Bilder mit CSS

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?

9 Kommentare

  1. Jonathan sagt:

    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 🙂

    • Anne sagt:

      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. […] habe ich noch abgerundete Ecken hinzugefügt und die Schrift in Großbuchstaben […]

  3. Leni sagt:

    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 🙂

  4. Engelchen sagt:

    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

    • Anne sagt:

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

  5. […] habe ich noch abgerundete Ecken hinzugefügt und die Schrift in Großbuchstaben […]

  6. Florian sagt:

    kurz und einfach erklärt, einfach nur top! Hab sogar ich kapiert 😉 Danke!!

Schreibe einen Kommentar

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!

Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.