How to create a straight line border

Question

I want to create a element that has a red border and a white right border but CSS creates a small diagonal cut out:

h1 {
  border: 5px solid red;
  border-right: 5px solid white;
}

Is there a way to make the lines go straight?

div { 
    width: 300px;
    height: 100px;
    background: #eee;
    border-radius: 0px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-left: 6px solid #0b0;
    border-top: 6px solid #0b0;
    border-bottom: 6px solid #0b0;
    border-right: 6px solid #fff;
    margin: 10px;
}

<div></div>

Use box-Shadows instead. See: https://stackoverflow.com/a/29411360/12478096 — YTG, Jan 14 '21 at 19:32

score 2 · Answer 1 · edited Jan 14 '21 at 19:39

2

Simply reduce the width of the right border.

I've added a background color to the div tags to emphasize where the content is drawn. Drawing a zero-width border will definitely affect the layout, but you could adjust for that by adding a margin-right.

#div1,
#div2,
#div3,
#div4 {
  height: 100px;
  width: 100px;
  margin: 2px;
  display: inline-block;
  background-color: grey;
  border: 5px solid red;
}

#div2 {
  border-right-color: white;
}

#div3 {
  border-right: 0px;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

edited Jan 14 '21 at 19:39

Martin

22,212
11
70
132

answered Jan 14 '21 at 19:32

D M

5,769
4
12
27

I don't believe so. I've added a background color to the `div` tags to emphasize where the content is drawn. Drawing a zero-width border will definitely affect the layout, but you could adjust for that by adding a `margin-right` equivalent to the width of the border. Am I misunderstanding your concern? – D M Jan 14 '21 at 19:37
That's a great answer, thanks for your clarifications. `:-)` – Martin Jan 14 '21 at 19:38
No worries, thanks for making sure I knew what I was talking about. `:)` – D M Jan 14 '21 at 19:38

How to create a straight line border

1 Answers1