CSS Box Shadow Bottom Only

Question

How can I do this  I want my element to look as though it has a shadow underline  I don t want the shadow for the other 3 sides

User · Accepted Answer

Do this                       box-shadow  0 4px 2px -2px gray    It s actually much simpler  whatever you set the blur to  3rd value   set the spread  4th value  to the negative of it

User · Answer

Try this   -moz-box-shadow 0 5px 5px rgba 182  182  182  0 75   -webkit-box-shadow  0 5px 5px rgba 182  182  182  0 75   box-shadow  0 5px 5px rgba 182  182  182  0 75     You can see it in http   jsfiddle net wJ7qp

User · Answer

try this to get the box-shadow under your full control        lt html gt        lt head gt           lt style gt               div                   width 300px                  height 100px                  background-color yellow                  box-shadow  0 10px black inset 0 -10px red inset  -10px 0 blue inset  10px 0 green inset                        lt  style gt       lt  head gt       lt body gt           lt div gt           lt  div gt       lt  body gt        lt  html gt    this would apply to outer box-shadow as well

User · Answer

You can use two elements  one inside the other  and give the outer one overflow  hidden and a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are  cut off    outer       width  100px      overflow  hidden      padding-bottom  10px      outer  gt  div       width  100px      height  100px      background  orange       -moz-box-shadow  0 4px 4px rgba 0  0  0  0 4       -webkit-box-shadow  0 4px 4px rgba 0  0  0  0 4       box-shadow  0 4px 4px rgba 0  0  0  0 4       Alternatively  float the outer element to cause it to shrink to the size of the inner element  See  http   jsfiddle net QJPd5 1

[css] CSS Box Shadow Bottom Only

Examples related to css

Examples related to underline

Examples related to box-shadow