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?

You can't; the border isn't customisable, so far as I'm aware. I'd be fascinated to be proven wrong, though... — David Thomas, Aug 31 '11 at 18:36
Possible duplicate of [How to create a border that fully covers the adjacent corners in CSS?](http://stackoverflow.com/questions/32351036/how-to-create-a-border-that-fully-covers-the-adjacent-corners-in-css) — vard, Oct 02 '15 at 14:33

score 69 · Answer 1 · answered Feb 13 '13 at 03:14

69

You can do this with box-shadow.

Demo:

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>

answered Feb 13 '13 at 03:14

ThinkingStiff

64,767
30
146
239

2

+1 for JSFiddle button (and for being one of only two answers that aren't "you can't") – Sandy Gifford May 08 '13 at 18:41
1

Perfect solution for my case! – Sergey Nov 12 '16 at 08:35
good approach, but i think it doesn't work for all cases with border-radius – Hilmar Demant May 26 '20 at 10:31

score 22 · Answer 2 · answered Apr 10 '13 at 22:53

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;

answered Apr 10 '13 at 22:53

Gustav

2,902
1
25
31

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 '15 at 12:12
2

This is brilliant. Should be accepted answer honestly. – Jon Wood Feb 21 '17 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. – Rockin4Life33 May 18 '18 at 15:50
Excellent trick, does exactly what's needed without `box-shadow`'s, extra `div`s etc. – Pimmol Dec 19 '18 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 '22 at 19:20

score 12 · Accepted Answer · edited Jan 14 '21 at 19:31

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.

edited Jan 14 '21 at 19:31

j08691

204,283
31
260
272

answered Aug 31 '11 at 18:43

stslavik

2,920
2
19
31

2

I think the solution offered by ThinkingStiff is a cleaner approach. – symmetry Dec 07 '16 at 21:07
i think this approach here is the only way if you want to deal with border-radius! – Hilmar Demant Dec 18 '20 at 09:17

score 9 · Answer 4 · answered Sep 04 '15 at 07:07

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>

answered Sep 04 '15 at 07:07

Madalina Taina

1,968
20
26

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 08 '16 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. – Madalina Taina Jun 08 '16 at 15:15
It is a good solution, but someone else already suggested using box shadow two years earlier. – Lindsey Aug 15 '16 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. – Madalina Taina Oct 06 '16 at 07:59

score 0 · Answer 5 · answered Jan 14 '21 at 19:52

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>

Kalankaboom · Answer 6 · 2022-01-12T14:07:21.130

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;

edited Jan 12 '22 at 14:07

answered Jul 14 '21 at 07:50

Kalankaboom

1
1

Suggestion : add a language identifier to highlight the code and make it more readable. – I_love_vegetables Jul 14 '21 at 09:07

score -1 · Answer 7 · answered Aug 31 '11 at 18:36

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).

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

7 Answers7

Output:

CSS:

HTML:

Option 1: Wrapper elements

Option 2: Linear Gradients

Linked

Related