RE: FN-FORUM: Can css add a circular border around an image?

date posted 22nd January 2007 17:58

Duncan Glendinning wrote:
> Afternoon all,
>
> I know css can create rounded corners, but can it turn a
> square image into a circle by cuting and rounding it off?

AFAIK, you can only do this by overlaying a transparent circle image mask -
ie a square image with the middle cut out and a border around the circle;
e.g.





In your CSS you'd have something like:

.mybackgroundimage {
background: url(../path/to/image/image-to-be-masked.gif) no-repeat
center;
}

This is a bare-bones version of the code but should sort out the issue.
Remember to take care of transparency issues and anti-aliasing if you use
GIFs.

HTH
Edward