box shadow for simulating top border

Question

Trying to simulate a top border that doesn't start at the left edge of the element.

.border-top {
    height: 50px;
    width: 100px;
    box-shadow:  15px -1px 0 0 black;
}

The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?

http://jsfiddle.net/3sjngyk1/

Where is the border supposed to start then? It's not clear what you are trying to do. — Paulie_D, Mar 31 '15 at 18:09

Paulie_D · Accepted Answer · 2015-03-31T18:15:33.390

Top border with just a box shadow?

.border-top {
  height: 50px;
  width: 100px;
  box-shadow: 0px -10px 0px 0px red;
  margin-top: 25px;
  background: lightblue;
}

<div class="border-top"></div>

Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).

.border-top {
  height: 50px;
  width: 100px;
  background: lightblue;
  position: relative;
  margin-top: 25px;
}
.border-top::after {
  content: '';
  position: absolute;
  height: 5px;
  bottom: 100%;
  left: 15px;
  width: calc(100% - 15px);
  background: red;
}

<div class="border-top"></div>

the top example does not have the 15px gap on the top left. The bottom example is intriguing. — hvgotcodes, Apr 03 '15 at 17:43

score 0 · Answer 2 · answered Mar 31 '15 at 17:52

0

How about this? http://jsfiddle.net/vleong2332/3sjngyk1/2/

.border-top {
    height: 50px;
    width: 100px;
    box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}

Put another shadow with the same color as the background on top of the black one.

answered Mar 31 '15 at 17:52

Vicky Leong

1,208
3
12
30

the boxshadow goes off the side of the element. – hvgotcodes Apr 02 '15 at 14:23
It does, but with the same color as background, it would hide the black shadow that's sticking out 15px to the right. Only the top 1px black shadow is visible. – Vicky Leong Apr 02 '15 at 20:09

box shadow for simulating top border

2 Answers2