Heute habe ich ein neues Video für euch – in diesem Video zeige ich euch wie schnell und einfach mal Bilder abrunden und verformen kann und zwar ohne dass man Photoshop verwendet, sondern nur mit einfachen CSS Befehlen.

Video

Zuerst müsst ihr das Bild mit einer Klasse erweitern. also etwa so

<img src="bild.jpg" class="kreis">

Wenn ihr also ein Bild gleichmässig abrunden möchtet, dann gebt diesen Befehl hier ein. Hiermit werden alle Ecken gleichmässig abgerundet. Bei einem Rechteckigen Bild wird es dann eher Eierförmig – bei einem Quadratischen Bild wirds rund.

.kreis {
border-radius:100%;
}

Die Ecken kann man auch einzeln oder gezielt ansteuern und dann muss man alle 4 Zahlen definieren. Die Reihenfolge der Zahlen ist:

border-radius: ObenLinks ObenRechts UntenLinks UntenRechts

Bei einer Tropfenform wäre dass dann etwa so

.kreis {
border-radius: 190px 0px 190px 90px;
}