How to create a straight line border [duplicate] - css

Question

This question already has answers here:
set css border to end in a 90 instead of a 45 degree angle
(7 answers)
css outline left and right
(1 answer)
Closed 2 years ago.
I want to create a element that has a red border and a white right border but CSS creates a small diagonal cut out:
h1 {
border: 5px solid red;
border-right: 5px solid white;
}
Is there a way to make the lines go straight?
div {
width: 300px;
height: 100px;
background: #eee;
border-radius: 0px;
border-top: 0;
border-left: 0;
border-right: 0;
border-left: 6px solid #0b0;
border-top: 6px solid #0b0;
border-bottom: 6px solid #0b0;
border-right: 6px solid #fff;
margin: 10px;
}
<div></div>

Answer 1

Simply reduce the width of the right border.
I've added a background color to the div tags to emphasize where the content is drawn. Drawing a zero-width border will definitely affect the layout, but you could adjust for that by adding a margin-right.
#div1,
#div2,
#div3,
#div4 {
height: 100px;
width: 100px;
margin: 2px;
display: inline-block;
background-color: grey;
border: 5px solid red;
}
#div2 {
border-right-color: white;
}
#div3 {
border-right: 0px;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>