35

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?

2

7 Answers 7

69

You can do this with box-shadow.

Demo: jsFiddle

Output:

box-shadow example

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>
3
  • 2
    +1 for JSFiddle button (and for being one of only two answers that aren't "you can't") May 8, 2013 at 18:41
  • 1
    Perfect solution for my case!
    – Sergey
    Nov 12, 2016 at 8:35
  • good approach, but i think it doesn't work for all cases with border-radius May 26, 2020 at 10:31
22

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;
5
  • 1
    well spotted. IE8 support, too, as opposed to box-shadow (yes, I'm working on a project requiring IE8 support O.o)
    – Larry
    Nov 10, 2015 at 12:12
  • 2
    This is brilliant. Should be accepted answer honestly.
    – Jon Wood
    Feb 21, 2017 at 15:17
  • I did something similar for the border-bottom on a button I had the same issue with just by adding border-width: 0; I wanted nice square edges on the bottom and not the standard mitered ones because it was more of an underline for the button and the rest of the borders were transparent. May 18, 2018 at 15:50
  • Excellent trick, does exactly what's needed without box-shadow's, extra divs etc.
    – Pimmol
    Dec 19, 2018 at 10:15
  • Absolutely the best answer; the miter doesn't have to always be 45 degrees, it is just the half way of the different thicknesses. What a fab solution!
    – Tobin
    Jun 21, 2022 at 19:20
12

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.

2
  • 2
    I think the solution offered by ThinkingStiff is a cleaner approach.
    – symmetry
    Dec 7, 2016 at 21:07
  • i think this approach here is the only way if you want to deal with border-radius! Dec 18, 2020 at 9:17
9

For the top border and the bottom border, you can use box-shadow:

.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>

4
  • 1
    no idea why you got a downvote, as this is one of the two only answers that actually shows a way of accomplishing this. well done!
    – oligofren
    Jun 8, 2016 at 11:26
  • Thank you @oligofren. I don't know either why my answer was ignored... It is nice you observed it is a way to resolve the problem. Jun 8, 2016 at 15:15
  • It is a good solution, but someone else already suggested using box shadow two years earlier.
    – Lindsey
    Aug 15, 2016 at 21:59
  • @Lindsey Thank you for the feedback. I don't understand why you say this could not work if you change the background on hover - you can change the box-shadow too or let the same proprieties. Oct 6, 2016 at 7:59
0

What you are seeing is that borders on different sides will split diagonally around the corner:

.border {
  border: 10px solid;
  border-top-color: forestgreen;
  border-right-color: gold;
  border-bottom-color: steelblue;
  border-left-color: firebrick;
  width: 40px;
  height: 40px;
}
<div class="border"></div>

This is a behavior many use to create CSS triangles

To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:

Option 1: Wrapper elements

.wrapper {
  border-bottom: 10px solid steelblue;
  height: 40px;
  width: 50px;
}

.border {
  border-right:10px solid gold;
  height: 40px;
  width: 40px;
}
<div class="wrapper">
  <div class="border"></div>
</div>

Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.

Option 2: Linear Gradients

.border {
  border-bottom: 10px solid;
  border-right: 10px solid;
  border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
  height: 40px;
  width: 40px;
}
<div class="border"></div>

0

If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :

    @keyframes widthSet {
        to{
            border-right-width: 10px; //or top and bottom, your choice
            border-left-width: 10px;
        }
    }

with animation-fill-mode: forwards;

1
  • Suggestion : add a language identifier to highlight the code and make it more readable. Jul 14, 2021 at 9:07
-1

You can't.

For 90˚ angles you could just use colored divs.

You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.