CSS Border Tapering

Question

CSS borders taper by default (as in the left side of this example):

Is there a way to get borders to behave like the right side of the example?

Answer 1

There's no way to modify the default jointing options, but there are a couple of workarounds.

Option 1:
If you can add another <div> element around the first one, you cans imply apply a left and right border to the outer <div>, and a top and bottom border to the inner one:

body > div {
  border-left: 10px solid blue;
  border-right: 10px solid green;
}

div > div {
  border-bottom: 10px solid gold;
  border-top: 10px solid red;
}

<div>
  <div>
    A div element with a border
  </div>
</div>

2: Using before and after psuedo-elements:
If you can't modify the DOM, you could use the before and after pseudo-elements as follows:

div {
  border-left: 10px solid blue;
  border-right: 10px solid green;
  padding: 10px 0;
  position: relative;
}

div::before,
div::after {
  content: '';
  display: block;
  height: 10px;
  left: 0;
  position: absolute;
  width: 100%;
}

div::before { background: red; top: 0 }
div::after  { background: gold; 0: 0 }

<div>
  A div element with a border
</div>

Note: In order to use this method, we must also set padding on the <div> element itself in order to allow us to position the 'borders'.