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

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;

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>