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 about 10 years ago by danwellman
  • Ah of course! Thank you Dan :) Russell Bishop about 10 years ago

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 about 10 years ago by Rob Crowther