CSS3 Gradients and border-radius leading to extraneous background in webkit

Question

After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.

Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)

To reproduce the undesirable effect, try something like the following

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: rgb(98,99,100);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
_{(source: friendlygp.com)}

You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.

Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.

I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.

However, if anyone can suggest an alternative I would be very much appreciative!

A screenshot or live page would be more helpful than a code snippet, and are you testing this in the shipping WebKit builds or the nightlies? — Azeem.Butt, Apr 12 '10 at 18:42
I'm not seeing any glitches with either the latest Webkit or Safari 4.0.5 on OS X; is this Windows-only? I believe you're talking about something involving the "Carry on reading" button on the page you linked, but nothing looks ugly there. Perhaps you could attach a screenshot showing what you're seeing? — BJ Homer, Apr 12 '10 at 19:31
Screenshot added to original post. Thanks BJ Homer. Interesting to hear that it could be a Webkit/Win only problem (I only test on mac once I get everything 'in place') — RichardTape, Apr 12 '10 at 19:49

score 21 · Accepted Answer · edited Jun 26 '12 at 12:13

21

Finally, after an awfully long time, someone much cleverer than I has a solution to this:

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

is your friend :)

From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

edited Jun 26 '12 at 12:13

Simon Kjellberg

826
8
17

answered Aug 10 '10 at 08:14

RichardTape

20,865
5
24
29

score 3 · Answer 2 · answered Apr 12 '10 at 20:58

3

This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.

answered Apr 12 '10 at 20:58

Dan

61,568
9
61
78

Thanks, Dan. I was starting to figure it was a bug with the inset box shadow, but that's just confirmed it. Time to try and implement the ugly buggy fix ;) – RichardTape Apr 12 '10 at 21:53

CSS3 Gradients and border-radius leading to extraneous background in webkit

2 Answers2

Linked