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