CODEWITHSUNDEEP
htmlcssuser-interface
Srikar Appalaraju
Srikar Appalaraju

Reputation: 73588

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

Upvotes: 453

Views: 707970

Answers (12)

Gregg B
Gregg B

Reputation: 13717

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.

Upvotes: 716

Rajaruban Rajindram
Rajaruban Rajindram

Reputation: 996

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

Upvotes: -1

Craigo
Craigo

Reputation: 3717

<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

Upvotes: 7

Uri Gross
Uri Gross

Reputation: 524

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

Upvotes: 0

Jodyshop
Jodyshop

Reputation: 664

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

Upvotes: 4

theMaxx
theMaxx

Reputation: 4076

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>

Upvotes: 2

Yaerius
Yaerius

Reputation: 241

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

Upvotes: 21

Gaunt
Gaunt

Reputation: 714

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

<hr style="opacity: 0.25">

Upvotes: 13

Muscaria
Muscaria

Reputation: 139

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.

Upvotes: 9

meddy
meddy

Reputation: 395

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

Upvotes: 7

Robert Koritnik
Robert Koritnik

Reputation: 105009

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.

Upvotes: 69

Ankheg
Ankheg

Reputation: 41

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>

Upvotes: -4

Related Questions