Add offset to border-bottom in CSS

Question

I have a problem where I need to make a border-bottom, with a given offset in CSS

for example, in this JSFiddle, I have a black border-bottom.

https://jsfiddle.net/uexma4o6/343/

<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>

but I want to give an offset to this 2px solid black border to be 5px above from where it is.

Is it possible?

Answer 1

This can be done with a linear-gradient:

.box {
  background:
    linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
    lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

You can also do it like this:

.box {
  background:
    linear-gradient(black,black) bottom/100% 2px no-repeat,
    lightcoral;
  border-bottom:5px solid lightcoral;
  width: 500px;
  height: 40px;
  box-sizing:border-box;
}

<div class="box"></div>

Another idea with box shadow:

.box {
  background:lightcoral;
  border-bottom:2px solid black;
  box-shadow:0 5px 0 lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

And with inset shadow:

.box {
  background:lightcoral;
  box-shadow:
    0 -5px 0 lightcoral inset,
    0 -7px 0 black inset;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

Answer 2

Solution

https://jsfiddle.net/StephanieSchellin/j7pmxkc3/

Use CSS ::after to add a pseudo element that has the border you are looking for. Then move the pseudo element around to position it how you like. This pseudo element will always be tied to its root element but you still have to take into account modifying it for @media query changes and such.

You see in the image below that this solution is layering the pseudo element over the root one. You can choose to use ::before or experiment with other positioning setups to accommodate your layout needs.

Always do plenty of cross browser testing when doing edge case things like this because its possible you will run into box model issues.

HTML

<div class='the-div'></div>

CSS

.the-div {
  width:500px;
  height:40px;
  background-color:lightcoral;
  position: relative
}
.the-div::after {
  border-bottom: 2px solid black;
  content: '';
  width:500px;
  position:absolute;
  bottom:5px;
}

Further Reading

See https://css-tricks.com/pseudo-element-roundup/ There are lots of cool things you can do with pseudo elements.