CODEWITHSUNDEEP
htmlcss
Philip
Philip

Reputation: 7166

CSS - Corner Radius with Box Shadow Inset, ugly corners

When I try to apply a box shadow to my element that has a 3px border radius I get ugly corners with pixels of the elements background.

HTML

<div id="wrapper">


</div>

CSS

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

JSFIDDLE http://jsfiddle.net/PCzFC/1/

If you look at the fiddle you see that the black background is in the corners. Is it supposed to be like this or is it a bug? I use Firefox.

Upvotes: 2

Views: 6657

Answers (4)

eye-wonder
eye-wonder

Reputation: 1193

You can create the same effect without the inset. Make a yellow wrapper around it.

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 290px;
    height: 290px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px 1px black;
    -webkit-box-shadow: 0 0 5px 1px black;
    box-shadow: 0 0 5px 1px black;
    margin: 5px;
}
.yellow {
    background: yellow;
    border-radius: 6px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    margin: 40px auto;
}​

<div class="yellow">
<div id="wrapper">

</div>
</div>

http://jsfiddle.net/PCzFC/65/

Upvotes: 2

Gerrit Bertier
Gerrit Bertier

Reputation: 4221

This is a known bug in Google Chrome, perhaps it's present in Firefox as well. http://code.google.com/p/chromium/issues/detail?id=29427

Upvotes: 4

The Mechanic
The Mechanic

Reputation: 2329

it is not a bug this will happen because you use inset shadow effect and if you can understand css then inset meaning is inside so it's normal if u remove inset from your code then it should be look fine or if you need shadow effect inside the box then you have to choose color and matched it to box color or you can remove border radius from your code then it should be look fine

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

Upvotes: -3

JakobMiller
JakobMiller

Reputation: 353

What shadow: inset does is to add shadows inside the box. If you remove inset on all the box shadows, the shadows will move to the outside of the box.

Upvotes: 0

Related Questions