W3C home > Mailing lists > Public > www-style@w3.org > April 2020

CSS circular image

From: Negoita Ionut <johnny.php@gmail.com>
Date: Mon, 13 Apr 2020 17:57:27 +0300
Message-ID: <5e947dd7.1c69fb81.2a153.9c93@mx.google.com>
To: "www-style@w3.org" <www-style@w3.org>

I'm John (aka @codingdudecom http://www.coding-dude.com/) and I'm working on a guide on how to do circle images with CSS (presenting an image in a circular shape)

I know that there is no one good solution that fits all cases, so I am trying to cover all possibilities.

So far, I've document 3 main methods with some variations detailed here http://www.coding-dude.com/wp/css/css-circle-image/

Method #1 – Wrapping the image in another element that has a border-radius of 50%

Method #2 – Using an element and setting the image as the background. Then applying the border-radius to this element

Method #3 – Using clip-path to clip the image element to a circle.

I've also taken into consideration the needs for responsive design.

Any other methods you can think of?

I would really appreciate other ideas on this topic.

Received on Monday, 13 April 2020 14:57:42 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:15 UTC