New issue
Advanced search Search tips

Issue 25334 link

Starred by 58 users

Issue metadata

Status: Duplicate
Merged: issue 46212
Owner: ----
Closed: Jun 2010
EstimatedDays: ----
NextAction: ----
OS: All
Pri: ----
Type: Bug

  • Only users with Commit permission may comment.

Sign in to add a comment

inset -webkit-box-shadow not adhering to -webkit-border-radius

Reported by, Oct 20 2009

Issue description

Chrome Version       :
OS + version : Kubuntu Karmic Koala 9.10
CPU architecture (32-bit / 64-bit): 64
window manager : KDE
URLs (if applicable) : n/a
Behavior in Firefox 3.x (if applicable): the box-shadow inset begins inside 
the border radius
Behavior in Chrome for Windows (optional): n/a/

What steps will reproduce the problem?
1. This div will highlight the problem:

<div style="
-moz-border-radius: 200px; 
-webkit-border-radius: 200px; 
background-color: #777; 
width: 500px; 
height: 200px; 
-webkit-box-shadow: inset 0px 0px 50px rgba(255, 0, 0, 0.5); 
-moz-box-shadow: inset 0px 0px 50px rgba(255, 0, 0, 0.5);

2. The red box shadow in Firefox will begin inside the border-radius. 
However, in chrome, it begins inside the box and not the box's border-

What is the expected result?

See Firefox's rendering.

What happens instead?

Please provide any additional information below. Attach a screenshot
and backtrace if possible.


Comment 1 by, Oct 20 2009

Above example rendered in Chromium :

and Rendered in Firefox 3.5/3.7 :

Comment 2 by, Oct 20 2009

This seemed to happen at the same exact time anti-aliasing was added to border-
radiuses. Just more info.

Comment 3 by, Oct 20 2009

Labels: -OS-Linux -Area-Misc OS-All Area-WebKit
Status: Assigned
I assume this is not just Linux. Jon to triage.

Comment 4 by, Oct 20 2009

Don't have a mac handy to test, but I would guess so too :)

Comment 5 by, Oct 21 2009

Labels: Mstone-X

Comment 6 by, Nov 3 2009

Status: Untriaged

Comment 7 by, Dec 2 2009

in Chrome for OSX, it renders correctly. However, in under Linux, 
it still renders incorrectly.
Also exists under windows:

2.4 KB View Download

Comment 9 by, Feb 28 2010

In Chrome for OS X 5.0.335.0 there is no problem.
In Chrome for Windows issue persists.
Screenshot 2010-02-28 at 12.31.05.png
138 KB View Download

Comment 10 by, Mar 1 2010

Still a problem in Chrome 5.0.335.0 for Linux.
74.4 KB View Download

Comment 11 by, Mar 16 2010

Still a very annoying issue... wish this would be fixed soon in Linux!
Windows nightly still has this bug
 Issue 35362  has been merged into this issue.
Just wanted to add that I'm getting this too, on a Windows XP machine.  Safari renders 
it properly, but both the stable and dev builds of Chrome have this bug.

Interestingly, it appears okay in Chrome on my Macs at home.
I'm also getting this same issue. Please fix this soon.
Mergedinto: 46212
Status: Duplicate
I am getting this issue on Chrome 5.0.375.125 on Windows 7. Does not affect Chrome 5.0.375.99 on Mac.

If your radius is small enough, you can hack around it like this:

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
border: 2px solid #fff;
margin: -2px;

Since there's no way to feature detect, I detect client OS and browser, then tack on a class to the HTML tag. Not my favorite implementation, but it works.

Comment 20 by Deleted ...@, Aug 16 2010

I'm also getting this on Chrome 5.0.375.126, Windows 7.
It looks ok on Safari.
I'm getting this on Chrome 6.0.472.55, Windows 7.

Comment 22 by, Sep 14 2010

The same thing on Chrome 7.0.517.0 dev, Windows 7.
I'm getting this on Chrome 6.0.472.59, Windows Vista.
why isn't this fixed yet? this is such an annoying glitch! windows here!
Seriously, fix this. 7.0.517.24, Windows Vista.
Will IE9 go final beating Chrome on this one? lol
Sense there's been two comments on this today, I'll be annoying and do a third one. After all, that's why they call them "bugs". ┬ŽD

Comment 28 by, Oct 5 2010

should have been merged into this bug... 

so you can stop posting here :P
Chrome is now on version 8 ad this bug is still not squashed. =/ Disappointing.
Is there a good reason why this bug has been hanging around for over a year? This is very, very bad. 

If I knew anything about the chromium source I would probably help fix it. Too bad I'm just a plain old web developer.

Comment 31 by, Dec 15 2010

Any updates yet?  Getting this on Windows XP sp2 Chrome 8.0.552.224.
Maybe we should get Anonymous to flood this issue with comments until the Chrome team as given it some attention. xP

Just kidding.

Comment 33 by Deleted ...@, Jan 24 2011

Is this so hard, the IE testing center is laughing at us becasue of this.
Chrome 10 dev and stillnot fixed... :( sad
Google chrome should just get their act together it is a bug that ruins many websites, especialy ones with custom buttons
Its not working on Windows XP chrome 9.0.597.84.

Comment 35 by Deleted ...@, Feb 16 2011

please get it fix.. this is very common design to have border radius + box shadow inset... for bevel a button

Comment 36 by Deleted ...@, Feb 19 2011

And it is fixed as of 10.0.648.82 on Windows 7 32-bit
Project Member

Comment 37 by, Oct 12 2012

Labels: Restrict-AddIssueComment-Commit
Mergedinto: chromium:46212
This issue has been closed for some time. No one will pay attention to new comments.
If you are seeing this bug or have new data, please click New Issue to start a new bug.
Project Member

Comment 38 by, Mar 11 2013

Labels: -Area-WebKit Cr-Content
Project Member

Comment 39 by, Apr 6 2013

Labels: -Cr-Content Cr-Blink

Sign in to add a comment