How can I change the thickness of my tag

Question

I want to change the thickness of my horizontal rule (

---

)in CSS. I know it can be done in HTML like so -

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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

<hr style="opacity: 0.25">

Answer 5

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

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