apply drop shadow to border-top only

Question

How do you apply a drop shadow to a specific border edge   For example  I have the following code   header nav       border-top  1px solid  202020      margin-top  25px      width  158px      padding-top 25px      I want a drop shadow  1px 1px 1px  cdcdcd  applied only to border-top   What s the best way to achieve this   EDIT  This is essentially what I m looking for  div       border-top  1px solid  202020      margin-top  25px      margin-left 25px      width  158px      padding-top 25px      -webkit-box-shadow  0px 1px 1px rgba 50  50  50  0 75       -moz-box-shadow     0px 1px 1px rgba 50  50  50  0 75       box-shadow          0px 1px 1px rgba 50  50  50  0 75       However  the shadow seems to be impacted by the padding  Is there anyway to attach the shadow to the border alone without adjusting the padding

User · Answer

I find using these interactive tools help visualize what's happening, and whats possible

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

Edit: Check out the other tools for experimenting with the other generators and combinations. I have to remind myself sometimes that just because you can, doesn't mean you should - its easy to get carried away!

User · Answer

The simple answer is that you can t  box-shadow applies to the whole element only  You could use a different approach and use   before in CSS to insert an 1-pixel high element into header nav and set the box-shadow on that instead

User · Answer

item  content      width  94 1       background   2d2d2d      padding  3       border-top  solid 1px  000      position  relative     item  content before        content            display  block        position  absolute        top  0px        left  0        width  100         height  1px        -webkit-box-shadow  0px 1px 13px rgba 255 255 255 1         -moz-box-shadow  0px 1px 13px rgba 255 255 255 1         box-shadow  0px 1px 13px rgba 255 255 255 1         z-index  100      I am like using something like it for it

User · Answer

Multiple box shadows did it for me   box-shadow          inset 0 -8px 4px 4px rgb 255 255 255           inset 0 2px 4px 0px rgba 50  50  50  0 75     http   jsfiddle net kk66f

User · Answer

Something like this     x000D   x000D  div   x000D    border  1px solid  202020  x000D    margin-top  25px  x000D    margin-left  25px  x000D    width  158px  x000D    height  158px  x000D    padding-top  25px  x000D    -webkit-box-shadow  0px -4px 3px rgba 50  50  50  0 75   x000D    -moz-box-shadow  0px -4px 3px rgba 50  50  50  0 75   x000D    box-shadow  0px -4px 3px rgba 50  50  50  0 75   x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

In case you want to apply the shadow to the inside of the element  inset  but only want it to appear on one single side you can define a negative value to the  spread  parameter  5th parameter in the second example    To completely remove it  make it the same size as the shadows blur  4th parameter in the second example  but as a negative value   Also remember to add the offset to the y-position  3rd parameter in the second example  so that the following   box-shadow          inset 0px 4px 3px rgba 50  50  50  0 75     becomes   box-shadow          inset 0px 7px 3px -3px rgba 50  50  50  0 75     Check this updated fiddle  http   jsfiddle net FrEnY 1282  and more on the box-shadow parameters here  http   www w3schools com cssref css3 pr box-shadow asp

[css] apply drop shadow to border-top only?

Examples related to css

Examples related to border

Examples related to dropshadow