cssborderdropshadow

apply drop shadow to border-top only?


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?


Solution

  • Something like this?

    div {
      border: 1px solid #202020;
      margin-top: 25px;
      margin-left: 25px;
      width: 158px;
      height: 158px;
      padding-top: 25px;
      -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
      -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
      box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
    }
    <div></div>