Chrome <hr> element split in middle-CodePudding

I have an <hr> element with a border, in Firefox it displayed nicely but in chrome, it has a split in the middle, does anyone know why this is and how to fix it?

How it should display:

How Chrome displays is:

CSS Styling:

hr {
  width: 90vw;
  border: 0.15em solid white;
  margin-top: 1em;
}

CodePudding user response：

Style only the top border to avoid 2 lines. The thickness of the top border is the height of the hr.

body {
    background-color: black;
}
hr {
    width: 90vw;
    border: 0;
    border-top: 0.15em solid white;
    margin-top: 1em;
}

<hr>

CodePudding user response：

Use only border-top, not border(which creates a rectangle with a border on all sides, as you can see it in Chrome). If you need it thicker, just change the thickness value.

body {
  background: black;
  margin: 0;
}

hr {
  width: 90vw;
  border-top: 0.15em solid white;
  margin-top: 1em;
}

<hr />

CodePudding user response：

try giving border-radius,

    width: 90vw;
    border: 0.15em solid black;
    margin-top: 1em;
    border-radius: 2px
 }```
hope this will solve your query.