How to box-shadow inset on just the Left, Bottom, Right -- not the top?

Question

I have the following box-shadow inset css3 styling:

box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);

The inset styling appears on all 4 sides of the box but I do not want styling on the top. How can I remove the styling from the top but keep the styling on the Left, Bottom, Right?

Thanks

Possible duplicate of [CSS3 box-shadow, all sides but one?](http://stackoverflow.com/questions/1429605/css3-box-shadow-all-sides-but-one) — Clive, Sep 24 '11 at 01:51

score 11 · Answer 1 · answered Oct 09 '12 at 20:30

11

This is what you want:

.right-left-bottom-shadow {
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}

The first one is left, second bottom and last the shadow for the right side. This looks really nice if your border has color #CCC.

answered Oct 09 '12 at 20:30

Loolooii

8,588
14
66
90

3

I confirm this to be working and supported on all major browsers (IE 9+). – pilau Nov 29 '12 at 23:17

score 4 · Answer 2 · answered Sep 24 '11 at 10:10

You can't do that with just box-shadow so far, but you can composite box-shadow with other possibilities like overflow: hidden. For example, you can push the top shadow outside of parent element and hide that part with overflow: hidden.

See this demo: http://jsfiddle.net/CatChen/Fty2N/3/

Ehtesham · Answer 3 · 2011-09-24T02:12:31.003

No CSS method I know for this but following can be a work around (not a perfect solution)

    <div id="mydiv">
       <div class="workaround"></div>
    </div>

CSS

   #mydiv { 
     background-color:#f00;
     height:100px;
     width:100px;
     box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
     padding:0 2px;
  }
 #mydiv .workaround {
    background-color:#f00;
    width:100%;
    height:10px;
 }

Check Fiddle http://jsfiddle.net/bZF48/17/

How to box-shadow inset on just the Left, Bottom, Right -- not the top?

3 Answers3