Chrome Version : 6.0.408.0 (47482)
URLs (if applicable) : www.webdesignerwall.com/demo/css3-search-form.html
Other browsers tested: Firefox 3.6
Add OK or FAIL after other browsers where you have tested this issue:
Firefox 3.x: OK
What steps will reproduce the problem?
1. Open a webpage that has a block element with both a border-radius and a
inset box shadow. Something like this:
-moz-box-shadow: #999 3px 3px 10px inset;
-webkit-box-shadow: #999 3px 3px 10px inset;
box-shadow: #999 3px 3px 10px inset;
What is the expected result?
The element should display correctly. The drop shadow should follow the
rounded corners and not overlap element's boundaries.
What happens instead?
You see the drop shadow is applied to the squared element's container, does
not follow the rounded corners.
Please provide any additional information below. Attach a screenshot if
If you take a look at this post, which explains how to do a CSS3 form with
drop shadows and rounded corners:
You'll see that the final result should look like this:
But in the current Chromium nightly build looks like this:
You can test the live example over here:
Hope you can take a look at this!