apply drop shadow to border-top only?

css border dropshadow
AMC picture AMC · Mar 20, 2012 · Viewed 103.9k times · Source

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?

Answer

danblundell picture danblundell · Mar 20, 2012

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>

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More