Hello everyone,
I'm creating a web site, and I'm trying to get it looking good using CSS.
One of the newer CSS properties is "border-radius", which allows you to put nuce rounded corners on your boxes. This isn't supported by many browsers yet (Firefox supports it as "-moz-border-radius"), but I wanted to use it, as the rounded edges aren't really that important, but would be nice to give FF users a little bit of extra eye candy.
So I've got both "border-radius" and "-moz-border-radius" in my stylesheet, set to 5px, and it works great, in browsers that support it.
However, when I add a background image to the same element, I find that it ignores the rounded edges, and draw the background right up to the corners of the box, which looks awful. This doesn't happen if the background is a colour rather than an image.
So my question is: Is this a Firefox bug, or is there another style I need to apply to stop it doing this?
Many thanks in advance to anyone who can answer this.