CODEWITHSUNDEEP
htmlcss
TheGenie OfTruth
TheGenie OfTruth

Reputation: 628

hr has a pointed end... How to get rid of this?

So I was looking at the page for horizontal lines here and the horizontal line looked at bit weird at the beginning. I'm running windows with the chrome browser and I zoomed in to 500% view and I saw this: Error Looking at the horizontal line you can make out a small dot at the beginning of the line that looks very annoying. Any ideas how to get rid of this?

Upvotes: 5

Views: 2018

Answers (2)

Oriol
Oriol

Reputation: 288120

By default, hr have inset borders:

enter image description here

The small dot you are seeing is the left border, which is as dark as the top border.

Then, you can just remove the left border.

enter image description here

hr { 
  border-left: none;
} 
<hr />

Upvotes: 7

onerockscott
onerockscott

Reputation: 356

Try changing the border style to something like border-style: solid

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
}

Upvotes: 0

Related Questions