Home/ Questions/Q 990419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:56:43+00:00

After my 1st question with relation to CSS3 gradients in which I was recreating

  • 0

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)
Ugly 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0