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?

score 81 · Accepted Answer · edited Apr 18 '18 at 08:00

81

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>

edited Apr 18 '18 at 08:00

Esko

4,109
2
22
37

answered Mar 20 '12 at 18:40

danblundell

1,443
12
7

Basically, yes. But, I need it to be on the underside of border-top. Is this possible? – AMC Mar 20 '12 at 18:49
3

Ah, that's good. I edited danblundell's fiddle to use the 'inset' property that makes the shadow be on the inside. Check this out: http://jsfiddle.net/FrEnY/4/ This is simpler than my other suggestion using ::before. – Ben Clayton Mar 21 '12 at 22:02
2

Is it possible to get rid of the shadow from spilling from under the right and left side? I'm looking for a way to have a shadow start from under the top border and go upwards and out only. Do I need to clip the shadow from the other sides some how? – 425nesp Jun 19 '20 at 20:26

score 22 · Answer 2 · answered Jun 10 '14 at 11:44

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

shipwreck · Answer 3 · 2013-12-28T19:27:18.637

4

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!

edited Dec 28 '13 at 19:27

answered Dec 28 '13 at 19:11

shipwreck

305
3
12

score 3 · Answer 4 · answered Mar 20 '12 at 18:41

3

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.

answered Mar 20 '12 at 18:41

Ben Clayton

80,996
26
120
129

1

Bear in mind that while the W3 wants to distinguish psuedo-elements using the double-colon (`::before`) notation, IE still seems to have problems and requires the single-colon version (`:before`). – David Thomas Mar 20 '12 at 19:08
1

Thanks @David. It's always IE isn't it? – Ben Clayton Nov 30 '12 at 11:17

score 2 · Answer 5 · answered May 08 '14 at 17:37

2

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/

answered May 08 '14 at 17:37

shaunw

354
3
11

score 1 · Answer 6 · answered May 06 '15 at 21:48

.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.

score 1 · Answer 7 · answered Jun 16 '21 at 11:46

My solution for adding a shadow to the top of a box only:

body {
  background-color:lightgray;
}
.box {
    box-shadow: rgb(0 0 0 / 50%) 0px -6px 6px -6px;
    padding:10px;
    margin-top:10px;
    background-color:white;
}

<div class="box">Box with top shadow</div>

If you want a bottom shadow, just do:

box-shadow: 0 6px 6px -6px rgb(0 0 0 / 50%)

apply drop shadow to border-top only?

7 Answers7