title: apply drop shadow to border-top only?
body: <p>How do you apply a drop shadow to a specific border edge?</p>
  
  <p>For example, I have the following code:</p>
  
  <pre><code>header nav {
      border-top: 1px solid #202020;
      margin-top: 25px;
      width: 158px;
      padding-top:25px;
  }
  </code></pre>
  
  <p>I want a drop shadow (1px 1px 1px #cdcdcd) applied only to border-top.</p>
  
  <p>What's the best way to achieve this?</p>
  
  <p>EDIT</p>
  
  <p>This is essentially what I'm looking for</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>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?</p>