How to change the width of a CSS border independently from it's parent?

December 6, 2021

I am looking to apply a custom border on a div. I’d like that border to have a length/width (unsure on how I should name this) that’s independent from the div width.

I know a similar question has been asked here but isn’t there a new solution that doesn’t rely on adding some extra HTML ?

#foo {
    height: 100px;
    width: 100px;
    background-color: red;

    border-top: 10px solid blue;
}

<div id="foo"></div>

>Solution :

You can try using ::before and ::after

#foo {
    height: 100px;
    width: 100px;
    background-color: red;
}

#foo::before {
  border-top: 5px solid blue;
  width: 80px;
  height: 5px;
  position: absolute;
  content: '';
  margin-left: calc((100px - 80px)/2);
  top: 3px;
}