Search code examples
cssbox-shadow

box shadow for simulating top border

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/

Solution

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