Bug 103730 – Border radius has no effect on clipped background

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Andrej Č.]

Here's a fiddle showing the problem: http://jsfiddle.net/Hgb4Y/

So what's going on:

1. The box has a border radius of 50% making it a circle
2. The box has a background color
3. I want this circle to have a semi-transparent border so I apply a border rule with rgba color
4. Problem - the circles's background shows through the border, but I want the border outside.
5. When I apply background-clip padding-box I should get the desired result, however in webkit the clipped background isn't round anymore.

In case the fiddle get deleted, here's the relevant css bit:

.test {
    width: 200px; height: 200px; margin: 100px;

    background: red;
    border-radius: 50%;
    border: 30px solid rgba(0,0,0,0.5);
    background-clip: padding-box;
}

[Simon Fraser (smfr)]

This is fixed on TOT, I think by bug 23166.

*** This bug has been marked as a duplicate of bug 23166 ***