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

html css user-interface
Srikar Appalaraju picture Srikar Appalaraju · Nov 11, 2010 · Viewed 467.7k times · Source

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

Answer

Gregg B picture Gregg B · Nov 11, 2010

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

Related questions

Align HTML input fields by :

I have a HTML form like: <html> Name:<input type="text"/></br> Email Address:<input type="text"/></br> Description of the input value:<input type="text"/></br&…

Read More
How do I get rid of an element's offset using CSS?

I've got a positioning problem with some elements, upon inspecting it IE8 Developer tools it shows me this: Now I'm pretty sure my problem is that 12 offset, but how do I remove it? I can't find any mention of a …

Read More
Easiest css for Facebook style "red" notifications

I need a facebook style notification, but getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications. What is the best cross-browser way of ensuring the notifications …

Read More