Search code examples
cssfirefoxoverflowrounded-corners

Firefox overflow bug with css background and rounded borders

I'm trying to design a button with orange background and rounded borders but the problem is background overflows. I cant see any problem on Chrome.

I used overflow: hidden but no help. Have any idea?

Here is the code:

display: inline-block;
padding: 8px 15px 6px;
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;

Firefox overflow problem overflow

Chrome enter image description here

Solution

  • What you probably want to use in Firefox is background-clip:

    background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
background-clip: padding-box;

    Here's an example. Remember the background property will reset values for any of the sub-properties not specified, so put background-clip last.