Re: CSS circular image

"L. David Baron" <[email protected]> Mon, 13 Apr 2020 10:41:35 -0700
Newsgroups gmane.comp.web.css.general
Message-ID <[email protected]>
On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote:
> I'm working on a guide on how to do circle=C2=A0images with CSS (presenti=
ng an image in a circular shape)
>=20
> I know that there is no one good solution that fits all cases, so I am tr=
ying to cover all possibilities.
>=20
> So far, I've document 3 main methods with some variations detailed here=
=C2=A0http://www.coding-dude.com/wp/css/css-circle-image/
>=20
> Method #1 =E2=80=93 Wrapping the image in another element that has a=C2=
=A0border-radius=C2=A0of 50%
>=20
> Method #2 =E2=80=93 Using an element and setting the image as the backgro=
und. Then applying the border-radius to this element
>=20
> Method #3 =E2=80=93 Using=C2=A0clip-path=C2=A0to clip the image element t=
o a circle.

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

-David

--=20
=F0=9D=84=9E   L. David Baron                        https://dbaron.org/   =
=F0=9D=84=82
=F0=9D=84=A2   Mozilla                          https://www.mozilla.org/   =
=F0=9D=84=82
             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)