set css border to end in a 90 instead of a 45 degree angle

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

You can do this with box-shadow.

Demo:

Output:

CSS:

#borders {     border-bottom: 20px solid black;       box-shadow: 20px 0 0 0 red;     height: 150px;     margin: 30px;     width: 150px; } 

HTML:

<div id="borders"></div> 

Answer 2

I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.

If we don't want the border on the upper edge, we can put border-width to 0.

border-width: 0px 5px 5px 5px; border-color:#ddd #000 #000 #000;