---

Not Showing - Html - 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 <hr> not showing Ask Question Asked 12 years, 2 months ago Modified 1 year, 4 months ago Viewed 118k times 52

I have a <hr> which isn't showing.

HTML:

<div id="line"><hr /></div>

CSS:

hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 731px; height: 10px; }

Any ideas why it's not showing?

• html
• css

Share Improve this question Follow edited Oct 9, 2012 at 5:09 user229044♦ 238k4141 gold badges342342 silver badges344344 bronze badges asked Sep 28, 2012 at 12:14 TeaDrinkingGeekTeaDrinkingGeek 2,01355 gold badges3636 silver badges5252 bronze badges 3

• Look at this jsfiddle.net/quEUF/1 – Dmytro Zarezenko Commented Sep 28, 2012 at 12:18
• He already use <hr/> to display line then why need to take border? – pkachhia Commented Sep 28, 2012 at 12:36
• Yes because you have used color, see my answer below – pkachhia Commented Sep 28, 2012 at 12:45

Add a comment |

7 Answers 7

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

try this code :

hr { border: 0; clear:both; display:block; width: 96%; background-color:#FFFF00; height: 1px; }

JSFiddle link http://jsfiddle.net/EXXrB/

Hope it will help you to resolve your problem.

Share Improve this answer Follow answered Sep 28, 2012 at 12:26 pkachhiapkachhia 1,92211 gold badge1919 silver badges3030 bronze badges 3

• Is this just a bug with Bootstrap 4? Thanks – Donny V. Commented Dec 24, 2018 at 4:01
• 1 It is old question , so I don't think there was any relation with Bootstrap 4. Let me know if you still have any confusion. – pkachhia Commented Dec 25, 2018 at 5:19
• 3 This issue comes up in Bootstrap 4. Your code fixed it. – Donny V. Commented Dec 26, 2018 at 15:05

Add a comment | 4

Remove border: 0; from the css rule for hr

Demo

Share Improve this answer Follow answered Sep 28, 2012 at 12:19 Clyde LoboClyde Lobo 9,17677 gold badges3636 silver badges6363 bronze badges 2

• 1 the color he has used into his code is Yellow, there is no yellow colored line into your demo. – pkachhia Commented Sep 28, 2012 at 12:34
• I have checked it into chrome – pkachhia Commented Sep 29, 2012 at 4:26

Add a comment | 4

Simple Way to get best Horizontal Line

. horizontalLine { border: none; border-bottom: 1px solid gainsboro; } Share Improve this answer Follow answered Apr 12, 2020 at 4:21 uma maheshuma mahesh 12411 silver badge55 bronze badges Add a comment | 2 hr { border:solid 1px black; width: 96%; color: #FFFF00; height: 1px; } Share Improve this answer Follow answered Sep 28, 2012 at 12:16 Man ProgrammerMan Programmer 5,35822 gold badges2323 silver badges2121 bronze badges Add a comment | 1

If you intend to use border:0px;, then set height:1px; and set background:#FFFF00; (OR) border:1px solid #FFFF00; and height:0px;

That might do the trick!

Either stick with border color to show a horizontal line or go with the background color for <HR> tag

Share Improve this answer Follow edited Oct 17, 2012 at 11:01 answered Sep 28, 2012 at 14:43 Nokia808FreakNokia808Freak 92399 silver badges3333 bronze badges Add a comment | 0

Try this

hr { border: 0; clear:both; display:block; width: 96%; color: #FFFF00; height: 1px; } Share Improve this answer Follow answered Sep 28, 2012 at 12:15 Murali MurugesanMurali Murugesan 22.6k1818 gold badges7575 silver badges122122 bronze badges 1

• Strangely, the height property was all I needed for the HR line to actually be visible in WordPress – Eric Hepperle - CodeSlayer2010 Commented May 9 at 13:39

Add a comment | 0

Try this

hr { width: 80% border-color: black }

Or if it's Tailwind CSS

.hr { @apply w-4/5 border-black } Share Improve this answer Follow answered Jul 19, 2023 at 15:14 Dave LeeDave Lee 49811 gold badge66 silver badges1111 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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

• html
• css

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

Related

1 Styling <hr> not displaying as expected 1 CSS not showing up 0 Why are the <hr> tags not visible on the website? 1 Can't make the css to display html 2 My CSS is not showing up 0 Nothing showing up in html 2 Having trouble with <hr> in CSS 0 only 1 out of 4 <hr/> tags not displaying 0 HTML header not displaying 0 CSS not showing

Hot Network Questions

• What kind of range hood do I need?
• Naive proof that subgroup of free group is free, what's wrong?
• Condition IF in Tikz
• Prove or disprove that the envelope of some chords of a conic section is another conic section
• How to utilize zener diode specs
• A dark animated movie about an orphaned girl working in an oppressive factory
• What is `where ()` in Rust?
• C# basic calculator
• Why would you not issue orders to a facility?
• Sequence and subsequence
• What is the correct article before "/s/ sound"?
• Finite subgroups of multiplicative complex numbers.
• How many colors do we need?
• Mind the gap between……
• endless looping in minimax
• How does time dilation affect the synchronization of clocks in different gravitational potentials?
• Whistleblown info on department cuts. Some students investigated and traced back my answers to my real identity. What are the potential consequences?
• Scandinavian film, 1980s, possibly called Royal Toilet?
• Advantages of information criteria over cross-validation
• What if someone comits murder when they are younger but weren't caught till they got a mental disease like dementia?
• Why do we have "моей" in "Тебе - моей"?
• Why do some people write text all in lower case?
• Does a touch spell have advantage when delivered by an invisible Familiar?
• Short story about a man living In an apartment who's curious about his neighbor who turns out to be a monster or demon

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