div border radius problem (on firefox and opera)

as you see there are two pictures.First, on chrome . There are Beğen开发者_如何学Go and Yorumlar buttons on right side.Border is looking very well..

But second pictures shows that ; firefox and opera have problem with border radius.I try to do border-witdh:thin, border:1px solid etc.. But Its look like same.

How can handdle it ? Do you have any idea ?

sorry for my english.Thank you

image on chrome

image on ff and opera

This effect is commonly referred to as "background bleed", or "leaking". It can be fixed through some simple CSS:

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

I first learned of this from Mike Harding's blog:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

And here's the W3C spec:
http://www.w3.org/TR/css3-background/#the-background-clip

... it almost looks like may get away without using border at all. There's enough contrast between the button and the background. Did you try using outer glow of 1px (blur-radius)?

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

To help with chome's border to border:1px double .... I know chrome has an issue with borders with a radius. Setting it to double rather than solid helps clean it up a bit. Kind of annoying.