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)