Border Radius bei Bildern

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Wenn Sie jemals versucht haben, border-radius auf <img>-Tags anzuwenden, wissen Sie, dass es nicht immer funktioniert (selbst wenn der Browser diese CSS3-Eigenschaft unterstützt, wie Firefox 3 und Opera 11). Der Grund dafür ist, dass das Bild Inhalt ist, kein Container, und der Container ist es, der mit border-radius abgerundet wird. Jonathan Neal hat eine Demo, um dies zu ermöglichen. Im Wesentlichen wird der Hintergrund des Bildelements auf sich selbst gesetzt und dann die src des Bildes in eine transparente GIF-Daten-URI geändert.

Update November 2012: Der Link aus dem Original ist jetzt nicht mehr verfügbar, aber ich empfehle sowieso nicht mehr, solche ausgefallenen Dinge zu verwenden. Hier ist ein Test Pen, der einfach nur den normalen alten Border-Radius bei Bildern zeigt, der in allen modernen Browsern funktioniert.

Direkter Link →