[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