'How can I change the thickness of my <hr> tag

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

Solution 1:^[1]

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.

In your stylesheet:

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

Or inline as you have it:

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

Longer explanation here

Solution 2:^[2]

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.

Solution 3:^[3]

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;
}

Solution 4:^[4]

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.

Solution 5:^[5]

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

<hr style="opacity: 0.25">

Solution 6:^[6]

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;"

Solution 7:^[7]

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>.

Solution 8:^[8]

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>

Solution 9:^[9]

<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

Solution 10:^[10]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Stephan Wagner
Solution 2
Solution 3	HoldOffHunger
Solution 4	Muscaria
Solution 5	Gaunt
Solution 6	meddy
Solution 7	Mitch Wheat
Solution 8	theMaxx
Solution 9	Craigo
Solution 10	Uri Gross

'How can I change the thickness of my <hr> tag

Solution 1:[1]

Solution 2:[2]

Sub-pixel rendering in browsers

Cross browser safe style

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]