Css rounded corners with border

Question

I use css to apply rounded corners to li navigation elements. This elements have a border too.

So this is how it looks like:

Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.

Any idea how to fix that? Do I have to use bg-images?

Answer 1

Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.

Answer 2

Yes it can be done using this jquery plugin. http://jquery.malsup.com/corner/

No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.