How Can I Change The Thickness Of My

---

Tag - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How can I change the thickness of my <hr> tag Ask Question Asked 14 years ago Modified 1 year, 8 months ago Viewed 700k times 452

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

• html
• css
• user-interface

Share Improve this question Follow edited Jul 15, 2019 at 6:18 Douglas Reid 3,71855 gold badges3232 silver badges4949 bronze badges asked Nov 11, 2010 at 5:57 Srikar AppalarajuSrikar Appalaraju 73.4k5555 gold badges219219 silver badges264264 bronze badges 9

• I want it really thin, user shouldn't notice it's there unless he specifically looks for it. Anyway trying out... – Srikar Appalaraju Commented Nov 11, 2010 at 6:05
• 7 You can also try making it more the color of the background so it blends in... – JustcallmeDrago Commented Nov 11, 2010 at 6:07
• 4 Since 1px is minimum, you should make the line light gray if you want it to be less noticeable. – Gert Grenander Commented Nov 11, 2010 at 6:10
• 2 @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 Commented Nov 11, 2010 at 6:44
• 16 Not half a pixel, half a px. The question isn't completely silly. reddit.com/r/shittyprogramming/comments/20zyea/… – Luke Rehmann Commented Apr 11, 2014 at 2:48

| Show 4 more comments

12 Answers 12

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 713

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.

Share Improve this answer Follow edited Mar 13, 2023 at 15:04 Cristian Ciupitu 20.8k77 gold badges5454 silver badges7979 bronze badges answered Nov 11, 2010 at 6:02 Gregg BGregg B 13.7k66 gold badges3535 silver badges5252 bronze badges 8

• 11 why are you making border:none? Any reason? Does border add thickness too? – Srikar Appalaraju Commented Nov 11, 2010 at 6:06
• 14 Yep, we want to use the background color for displaying the line for consistency. FF uses the border to create the <hr> but ie doesn't. This will make them both the same. – Gregg B Commented Nov 11, 2010 at 6:12
• 2 Yea, I've always found cross-browser <hr> tags obnoxious. It's nice to get them behaving properly. – Gregg B Commented Nov 11, 2010 at 19:28
• 1 How old of IE for the fallback color? – trysis Commented Jul 28, 2015 at 22:41
• 1 How do you handle style using this method? (i.e. dashed, dotted, solid etc) – erotavlas Commented Aug 16, 2017 at 19:29

| Show 3 more comments 69

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.

Share Improve this answer Follow edited Jan 17, 2013 at 18:06 answered Nov 11, 2010 at 6:39 Robert KoritnikRobert Koritnik 105k5656 gold badges284284 silver badges411411 bronze badges 0 Add a comment | 21

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; } Share Improve this answer Follow edited Jun 7, 2019 at 14:10 HoldOffHunger 20.7k1111 gold badges118118 silver badges146146 bronze badges answered Jul 17, 2018 at 8:31 YaeriusYaerius 24122 silver badges77 bronze badges 1

• 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 Commented Apr 17, 2020 at 12:16

Add a comment | 13

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

<hr style="opacity: 0.25"> Share Improve this answer Follow answered Apr 5, 2018 at 21:17 GauntGaunt 72499 silver badges2121 bronze badges Add a comment | 9

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.

Share Improve this answer Follow answered Nov 28, 2015 at 13:57 MuscariaMuscaria 13911 silver badge33 bronze badges 2

• 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 Commented Nov 28, 2015 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 Commented Aug 20, 2019 at 17:41

Add a comment | 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;"

Share Improve this answer Follow answered Dec 12, 2014 at 0:13 meddymeddy 39577 silver badges2222 bronze badges Add a comment | 7

<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

Share Improve this answer Follow answered Mar 19, 2022 at 4:37 CraigoCraigo 3,6993333 silver badges2525 bronze badges Add a comment | 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>.

Share Improve this answer Follow edited May 3, 2021 at 4:35 Mitch Wheat 300k4444 gold badges477477 silver badges550550 bronze badges answered Dec 15, 2019 at 14:17 JodyshopJodyshop 66488 silver badges1616 bronze badges Add a comment | 2

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>

Share Improve this answer Follow answered Mar 21, 2020 at 16:17 theMaxxtheMaxx 4,06622 gold badges2828 silver badges3434 bronze badges Add a comment | 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; } Share Improve this answer Follow answered Feb 22, 2022 at 8:54 Uri GrossUri Gross 51411 gold badge88 silver badges2121 bronze badges Add a comment | -1

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/> Share Improve this answer Follow answered Aug 1, 2022 at 3:19 Rajaruban RajindramRajaruban Rajindram 99677 silver badges1313 bronze badges Add a comment | -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> Share Improve this answer Follow answered Nov 11, 2010 at 8:20 AnkhegAnkheg 4111 bronze badge 3

• Heheheh :) Never seen this before :) – Prakash Raman Commented Mar 4, 2015 at 20:58
• 2 Why create a DIV to emulate a HR, if you can use an HR? – José Neto Commented Apr 24, 2021 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 Commented Sep 19, 2021 at 14:16

Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• user-interface

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

5 Why is my 'hr' in HTML displaying with an extra half pixel on it? 0 HTML: how to remove the space inside the <hr> element -1 HTML4 to HTML5: What is an equivalent of <hr size=1> to HTML5?

Related

6 Is there any way to make the HTML underline thicker? 0 Can I make my <ul>’s border bigger? 39 Styling the <hr /> element 12 How can i set thickness of horizontal rule in html 1 How to Style an hr Tag Using CSS and HTML? 0 Styling an <hr> tag 15 How to reduce default margin of hr tag? 6 How to style up a hr tag 1 How to give space in the middle of hr tag? 0 Space adjustment between <hr> line tag

Hot Network Questions

• Are periodic functions such as sine and cosine defined on surreal numbers?
• Will Spirit trade with SAVEQ when it recovers?
• Why am I getting no output in tcpdump even though there is data being sent and received when using network namespaces?
• Short story about a man living In an apartment who's curious about his neighbor who turns out to be a monster or demon
• What is the Calvinist/Reformed solution to the Problem of Hell?
• An idiom similar to 'canary' or 'litmus test' that expresses the trend or direction a thing is pointed
• Is there a theorem in metaphysics that basically says, "Biting the bullet will be inevitable in any metaphysical theory?"
• How SMA (or RF) connector's impedance is measured and rated?
• C# basic calculator
• Why does VGA sync have 50 Ω drivers but 75 Ω cables?
• Prove or disprove that the envelope of some chords of a conic section is another conic section
• Testing Puzzles for Puzzle Book: Enigmatic Puzzle
• Why does 写真に収めとこ mean take a picture? And what is the purpose of とこ in this case?
• Are "Albergue de peregrinos" typically restricted to pilgrims?
• Do the surreal numbers enjoy the transfer principle in ZFC?
• Missile Impact Velocity
• How does time dilation affect the synchronization of clocks in different gravitational potentials?
• Is there any penalty for providing half cover to another creature?
• Do referees get to see each other's reports?
• Did Superdana manufacture a 66 AC outlet power strip/surge protector?
• What is the origin of the term "Dog Character" in the context of fighting games?
• Dantzig-Wolfe Decomposition for nurse Scheduling problem
• How to protect against fake gold bars?
• Conditionally making environment content disappear

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html