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

Re: CSS circular image

From: L. David Baron <dbaron@dbaron.org>
Date: Mon, 13 Apr 2020 10:41:35 -0700
To: Negoita Ionut <johnny.php@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-ID: <20200413174135.GA3574@pescadero.dbaron.org>
On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote:
> 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.

Specifying 'border-radius: 50%' on the <img> itself also works, and
seems simpler than the above three.

-David

-- 
𝄞   L. David Baron                        https://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)
Received on Monday, 13 April 2020 17:41:55 UTC

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