CSS Border Tapering - css

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'.

Answer 2

I don't know of any solution that would change the rendering of the border, but you could nest two divs and overlap them.
.inner {
border-top: 20px solid red;
border-bottom: 20px solid orange;
height: calc(100% - 40px);
}
.outer {
border-left: 20px solid blue;
border-right: 20px solid green;
height: 60px;
}
<div class="outer">
<div class="inner">
Two div elements with borders.
</div>
</div>

Answer 3

You can do this with one element and gradient:
.box {
padding: 20px;
background:
conic-gradient(at top 20px left 20px,
red 90deg, #0000 0 180deg, blue 0) 0,
conic-gradient(at bottom 20px right 20px,
green 180deg, orange 0 270deg, #0000 0) 100%;
background-size: calc(100% - 20px);
background-repeat: no-repeat;
}
<div class="box">
Two div elements with borders.
</div>

Answer 4

You can use div::after to do what you want with a single div like this:
div {
border-right: 10px solid green;
border-left: 10px solid blue;
height: 100px;
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
border-top: 10px solid red;
border-bottom: 10px solid yellow;
}
<div class="d2"></div>

Answer 5

Box-shadows could do that
div {
border-top: 10px solid red;
border-bottom: 10px solid orange;
position: relative;
width: 400px;
height: 50px;
margin: 1em auto;
box-shadow: 10px 0 0 0 green, -10px 0 0 0 blue;
}
<div></div>