[Webkit-unassigned] [Bug 34824] New: box-shadow: inset does not respect border-radius

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Feb 10 17:52:39 PST 2010


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

           Summary: box-shadow: inset does not respect border-radius
           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: paradox460 at gmail.com


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.

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