div border radius problem (on firefox and opera)

Question

as you see there are two pictures.First, on chrome . There are Beğen 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

Answer 1

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

Answer 2

... 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];