Question

I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.

How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?

Answer 1

Sad fact: Border corners are mitered. Always. (It’s only visible if using different colors.)

In order to simulate a butt joint, you can stack two divs to get a simulated result:

div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
}

<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>

Stack more or control the top and bottom differently for better control over the appearance of the joint.