[Webkit-unassigned] [Bug 103730] New: Border radius has no effect on clipped background

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Nov 30 04:05:18 PST 2012


https://bugs.webkit.org/show_bug.cgi?id=103730

           Summary: Border radius has no effect on clipped background
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: andrej.cremoznik at gmail.com


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;
}

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.



More information about the webkit-unassigned mailing list