How to create shadow only left and right side, on a line?

Question

i have a line of width: 15px; and height of 2px;
my question is, how to create the shadow only on right and left side?

Answer 1

This fiddle has examples showing shadows only on:

• Top and bottom
• Left and right
• Top

With that you should be able to do any kind of shadow.

http://jsfiddle.net/rafaelchiti/5jdHW/

The code:

div {
  margin-top: 20px;
  margin-left: 20px;    
  width: 100px;
  height: 100px;
}

.horizontal {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.vertical {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.one-side {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}

Hope this help.