Hi guys,

I've seen a lot about this moz-border-radius stuff and it all seems quite exciting, although I'm a little confused as to how I can use it to actually round a border, not the container's contents.

The image I've given shows what I mean; the image itself has corners, whereas it's border is rounded. Is it possible, and how?

alt text

2 answers

danwellman 5600
This was chosen as the best answer

Simply use a normal rectangular image , inside a div which is bigger than the image by the sum of the borders, with the background-color set to the colour you want the borders and the moz-border-radius set on it.

You can't round just the border as such, you can only make it look as if the border is rounded.

Answered over 9 years ago by danwellman

You can round the image in WebKit by specifying -webkit-border-radius on img. Here is an example which works in Chrome and Safari.

This doesn't work in Gecko yet. However, there is a different trick you can do in Gecko using SVG clipping masks. Here is an example which works in Firefox 3.5.

It's a bit tricky doing it all in the same document as SVG in XHTML has to be served as application/xhtml+xml, so you'd need either server side logic to server different content types to different browsers or you can link to an external SVG file.

Answered over 9 years ago by Rob Crowther