How can I change the thickness of my
tag

Question

I want to change the thickness of my horizontal rule (<hr>)in CSS. I know it can be done in HTML like so -

<hr size="10">

But I hear that this is deprecated as mentioned on MDN here. In CSS I tried using height:1px but it does not change the thickness. I want the <hr> line to be 0.5px thick.

I am using Firefox 3.6.11 on Ubuntu

I want it really thin, user shouldn't notice it's there unless he specifically looks for it. Anyway trying out... — Srikar Appalaraju, Nov 11 '10 at 06:05
You can also try making it more the color of the background so it blends in... — JustcallmeDrago, Nov 11 '10 at 06:07
Since 1px is minimum, you should make the line light gray if you want it to be less noticeable. — Gert Grenander, Nov 11 '10 at 06:10
is `1px`minimum? minimum for what? I mean is this tag specific or for all html tags 1px is minimum. — Srikar Appalaraju, Nov 11 '10 at 06:13
@MovieYoda: Dimensions can go subpixel, but rendering will be rounded to the nearest pixel. It's like expecting an integer value to be 1.23784... Impossible. You can set it to this kind of value but it will get rounded to the nearest whole number. Theoretically you could render widths rounded to 1/3 of pixel on LCDs because of technology specifics, but I doubt browsers actually do that either. Remaining subpixel dimension can't be of any colour because it's related to just one of the RGB phosphors. — Robert Koritnik, Nov 11 '10 at 06:44
@Srikar Correct me if I'm wrong, and I am definitely using layman's terms here, but I think the issue (pertaining to the 1px minimum) is the fact that, telling the screen to display something with a 1px dimension, ends up telling the screen (regardless of the device) to display 1px (wide or tall). Since a pixel is either lit or not lit, trying to display something half a pixel wide or tall would be like telling a lamp to light up only half of the bulb. The technology just doesn't work that way (or at least that's how I've always thought of it). — VoidKing, Dec 21 '12 at 16:32
@VoidKing I think you are correct. My knowledge too has improved since last 2 years :) thanks for the reply though... — Srikar Appalaraju, Dec 21 '12 at 17:27
@Srikar You're welcome. Yeah, I think I overlooked the date on this somehow, when I commented. Just think, you could ask another question and get a VoidKing answer in only two short years! LOL — VoidKing, Dec 28 '12 at 14:10
Not half a pixel, half a px. The question isn't completely silly. http://www.reddit.com/r/shittyprogramming/comments/20zyea/how_can_i_make_a_line_with_a_half_pixel_width_in/ — Luke Rehmann, Apr 11 '14 at 02:48

score 668 · Accepted Answer · edited Mar 13 '23 at 15:04

668

For consistency remove any borders and use the height for the <hr> thickness. Adding a background color will style your <hr> with the height and color specified.

hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #333;  /* old IE */
  background-color: #333;  /* Modern Browsers */
}

<hr>

Inline version:

<hr style="height:1px;border:none;color:#333;background-color:#333;">

Longer explanation here.

edited Mar 13 '23 at 15:04

Cristian Ciupitu

20,270
7
50
76

answered Nov 11 '10 at 06:02

Gregg B

13,139
6
34
50

11

why are you making `border:none`? Any reason? Does border add thickness too? – Srikar Appalaraju Nov 11 '10 at 06:06
14

Yep, we want to use the background color for displaying the line for consistency. FF uses the border to create the
but ie doesn't. This will make them both the same. – Gregg B Nov 11 '10 at 06:12
2

Yea, I've always found cross-browser
tags obnoxious. It's nice to get them behaving properly. – Gregg B Nov 11 '10 at 19:28
Or, if you just need a one-off, you can do it inline with `
;` – Jesse Chisholm Mar 29 '15 at 17:28
1

How old of IE for the fallback `color`? – trysis Jul 28 '15 at 22:41
Not working with Swing html components (e.g JTooltip) – ron190 Jun 12 '16 at 17:39
1

How do you handle style using this method? (i.e. dashed, dotted, solid etc) – erotavlas Aug 16 '17 at 19:29

Robert Koritnik · Answer 2 · 2013-01-17T18:06:05.060

Sub-pixel rendering in browsers

Sub-pixel rendering is tricky. You can't actually expect a monitor to render a less than a pixel thin line. But it's possible to provide sub-pixel dimensions. Depending on the browser they render these differently. Check this John Resig's blog post about it.

Basically if your monitor is an LCD and you're drawing vertical lines, you can easily draw a 1/3 pixel line. If your background is white, give your line colour of #f0f. To the eye this line will be 1/3 of pixel wide. Although it will be of some colour, if you'd magnify monitor, you'd see that only one segment of the whole pixel (consisting of RGB) will be dark. This is pretty much technique that's used for fine type hinting i.e. ClearType.

But horizontal lines can only be a full pixel high. That's technology limitation of LCD monitors. CRTs were even more complicated with their triangular phosphors (unless they were aperture grille type ie. Sony Trinitron) but that's a different story.

Basically providing a sub-pixel dimension and expecting it to render that way is same as expecting an integer variable to store a number of 1.2034759349. If you understand this is impossible, you should understand that monitors aren't able to render sub-pixel dimensions.

Cross browser safe style

But the way horizontal rules that blend in are usually done using colours. So if your background is for instance white (#fff) you can always make your HR very light. Like #eee.

The cross browser safe style for very light horizontal rule would be:

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

And use a CSS file instead of in-line styles. They provide a central definition for the whole site not just a particular element. It makes maintainability much better.

score 20 · Answer 3 · edited Jun 07 '19 at 14:10

20

I would recommend setting the HR itself to be 0px high and use its border to be visible instead. I have noticed that when you zoom in and out (ctrl + mouse wheel) the thickness of HR itself changes, while when you set the border it always stays the same:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

edited Jun 07 '19 at 14:10

HoldOffHunger

18,769
10
104
133

answered Jul 17 '18 at 08:31

Yaerius

231
2
7

I can see that in latest Chrome it's changing in thickness along the rest of the page. What's worse, it can disappear if you zoom out :( – Pavel Alexeev Apr 17 '20 at 12:16

score 11 · Answer 4 · answered Apr 05 '18 at 21:17

11

I added opacity to the line, so it seems thinner:

<hr style="opacity: 0.25">

answered Apr 05 '18 at 21:17

Gaunt

649
8
20

score 8 · Answer 5 · answered Nov 28 '15 at 13:57

I was looking for shortest way to draw an 1px line, as whole load of separated CSS is not the fastest or shortest solution.

Up to HTML5, the WAS a shorter way for 1px hr: <hr noshade> but.. The noshade attribute of <hr> is not supported in HTML5. Use CSS instead. (nor other attibutes used before, as size, width, align)...

Now, this one is quite tricky, but works well if most simple 1px hr needed:

Variation 1, BLACK hr: (best solution for black)

<hr style="border-bottom: 0px">

Output: FF, Opera - black / Safari - dark gray

Variation 2, GRAY hr (shortest!):

<hr style="border-top: 0px">

Output: Opera - dark gray / FF - gray / Safari - light gray

Variation 3, COLOR as desired:

<hr style="border: none; border-bottom: 1px solid red;">

Output: Opera / FF / Safari : 1px red.

I'd be pleased, if please someone will test it for Chrome and IE. First two variations are quite tricky, esp. 2nd variation, which outputs visible first BLACK 1px . — Muscaria, Nov 28 '15 at 13:59
I like this solution because it doesn't hard-code any color info, which can be useful for compatibility with dark-mode. Works OK on Chrome. — tresf, Aug 20 '19 at 17:41

score 7 · Answer 6 · answered Dec 12 '14 at 00:13

7

height attribute has been deprecated in html 5. What I would do is create a border around the hr and increase the thickness of the border as such: hr style="border:solid 2px black;"

answered Dec 12 '14 at 00:13

meddy

385
6
21

score 5 · Answer 7 · answered Mar 19 '22 at 04:37

5

<hr /> aren't great to customise due to browser implementation differences.

It's often easier to just use a div:

Blah blah
<div style="border-bottom: 1px solid #333;"></div>
More blah blah

answered Mar 19 '22 at 04:37

Craigo

3,384
30
22

score 4 · Answer 8 · edited May 03 '21 at 04:35

4

I believe the best achievement for styling <hr> tag is as follow:

hr {
    color: #ddd;
    background-color: #ddd;
    height: 1px;
    border: none;
    max-width: 100%;
}

And for the HTML code just add: <hr>.

edited May 03 '21 at 04:35

Mitch Wheat

295,962
43
465
541

answered Dec 15 '19 at 14:17

Jodyshop

656
8
12

score 2 · Answer 9 · answered Mar 21 '20 at 16:17

Here's a solution for a 1 pixel black line with no border or margin

hr {background-color:black; border:none; height:1px; margin:0px;}

Tested in Google Chrome

I thought I would add this because the other answers didn't include: margin:0px;.

Demo

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

score 0 · Answer 10 · answered Feb 22 '22 at 08:54

0

I had a problem to change the color to real black when I made the

thicker. So I changed the opacity to 1 and it solved the problem:

hr{
    height: 5px;
    background-color: black;
    opacity: 1;
}

answered Feb 22 '22 at 08:54

Uri Gross

484
1
8
20

score -1 · Answer 11 · answered Aug 01 '22 at 03:19

There is another simplest way with just using HTML property on the tag itself, just add 'noshade' property after declaring 'size' property.

Where the 'size' reflects the thickness of the line and 'noshade' applies the background color of the line across the thickness

For Example:

<hr size="10" noshade/>

score -4 · Answer 12 · answered Nov 11 '10 at 08:20

-4

I suggest to use construction like

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

answered Nov 11 '10 at 08:20

Ankheg

41
1

Heheheh :) Never seen this before :) – Prakash Raman Mar 04 '15 at 20:58
2

Why create a DIV to emulate a HR, if you can use an HR? – José Neto Apr 24 '21 at 11:27
I think he has a point. Using ``div`` instead of ``hr`` get rid of the unwanted margin on top and bottom of the line. – s k Sep 19 '21 at 14:16

How can I change the thickness of my
tag

12 Answers12

Sub-pixel rendering in browsers

Cross browser safe style

Linked

How can I change the thickness of my tag

12 Answers12

Sub-pixel rendering in browsers

Cross browser safe style

Linked

How can I change the thickness of my
tag