Why is my 'hr' in HTML displaying with an extra half pixel on it?

Question

It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:

hr {margin:0%;line-height: 100%;}

Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.

Are you using a reset stylesheet? – Wottensprels Apr 16 '13 at 13:58 — Wottensprels, Apr 16 '13 at 13:58
can u add the code in jsfiddle – dreamweiver Apr 16 '13 at 13:58 — dreamweiver, Apr 16 '13 at 13:58
Turns out it was just some shading issues. – l0adopt1c Apr 16 '13 at 14:04 — l0adopt1c, Apr 16 '13 at 14:04
Scrap that, apparently deprecated. Still need help. – l0adopt1c Apr 16 '13 at 14:06 — l0adopt1c, Apr 16 '13 at 14:06

JR Smith · Accepted Answer · 2013-04-16T17:12:25.817

6

Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling

It's in the comments now, but here's the fix that worked for him. hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }

edited Apr 16 '13 at 17:12

answered Apr 16 '13 at 14:00

JR Smith

1,186
15
20

Yes, I tried it in Firefox and nothing was wrong. However, I need this to work in Chrome and for the life of me I cannot figure out what's wrong with it. – l0adopt1c Apr 16 '13 at 14:00
Try using this fix, should work across browsers. hr { border:none; border-top:1px #CCCCCC solid; height: 1px; } – JR Smith Apr 16 '13 at 14:05

ferdyh · Answer 2 · 2013-04-16T14:06:32.967

4

The HR uses a shadow on it in most browsers. You should override the style using css or something like:

<hr noshade size="1" />

Update: noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/

edited Apr 16 '13 at 14:06

answered Apr 16 '13 at 14:01

ferdyh

1,355
2
11
29

This method is deprecated in HTML4 – Alex W Apr 16 '13 at 14:04
If it is deprecated I do not want to use it, as I have my page conforming to industry standards. – l0adopt1c Apr 16 '13 at 14:05
Thank you so much, but the other dude's code is what fixed my issue. – l0adopt1c Apr 16 '13 at 14:14

score 2 · Answer 3 · answered Apr 16 '13 at 14:10

2

Css Solution:

hr {
    border: none;
    background-color: #000;
    color: #000;
    height: 1px;
}

answered Apr 16 '13 at 14:10

S.Visser

4,645
1
22
43

score 1 · Answer 4 · edited May 23 '17 at 10:29

1

Cross-browser solution with CSS:

hr { height: 1px; background-color: #000; border: 0 none; }

How I change the thickness of my <hr> tag

jsFiddle:

http://jsfiddle.net/6nXaN/

edited May 23 '17 at 10:29

Community

1
1

answered Apr 16 '13 at 14:10

Alex W

37,233
13
109
109

In your jfFiddle, if you write 3 (or more)
tags, you'll see some of them are 2px height. – cooper May 17 '16 at 10:21

score 1 · Answer 5 · answered May 02 '14 at 15:48

An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:

hr { border-left: none; }

...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.

Why is my 'hr' in HTML displaying with an extra half pixel on it?

5 Answers5