Bug 34824 - box-shadow: inset does not respect border-radius
Summary: box-shadow: inset does not respect border-radius
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-02-10 17:52 PST by paradox
Modified: 2010-02-10 20:29 PST (History)
2 users (show)

See Also:


Attachments
Testcase for box-shadow bug (158 bytes, text/html)
2010-02-10 18:30 PST, paradox
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description paradox 2010-02-10 17:52:39 PST
When using box-shadow: inset on an element with a border-radius applied, the inset shadow does not follow the radius.

What happens:

The shadow renders to the full width of the element, instead of following border-radius.

What should happen:
The inset shadow should cut off at the radius, or even curve down slightly with the radius (much like a photoshop bevel).

This curve-down effect can be seen on a number of buttons around the internet, such as these:
http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/#icons

The most technical way of describing it is a gradient is placed on the downward curve of the inset shadow. It is 100% opaque at the top, and 100%transparent at the bottom of the bevel.
Comment 1 paradox 2010-02-10 18:30:37 PST
Created attachment 48539 [details]
Testcase for box-shadow bug
Comment 2 paradox 2010-02-10 18:47:40 PST
http://girliemac.com/sandbox/button.html

This is another example of how this should render, with a live example as well.
Comment 3 Simon Fraser (smfr) 2010-02-10 20:29:48 PST
This bug has been fixed in top of tree WebKit. If you continue to see the bug on a specific platform, please follow up with them.