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?
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.
You can round the image in WebKit by specifying
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.