How can I set thickness of a horizontal rule in html/CSS
You could use the SIZE property:
<hr size="3" />
Please note that this is deprecated. You should really use styles to resolve this.
hr {
height: 3px;
}
If you have a lot of <hr /> in your document, just add a style in your <head> section
hr
{
border: 5px solid #000;
}
and change the 5px to whatever you want.
edit Dont use height, it will make your hr look hollow, unless thats what you are looking for.
here is a simple example: http://jsfiddle.net/ErdXg/
try out some colors and thickness and play around with it.
.cool_line{
display:block;
border:none;
color:white;
height:1px;
background:lightgray;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(lightgray), to(#fff));
}
Begin
<hr class='cool_line' />
End
Including Firefox:
hr {
border: none;
border-bottom: 1px solid #9b9b9b;
}
You can use CSS, like this:
hr {
height: 20px;
}
for other examples of the HR attributes go here
<hr height="3" style="color:purple;background-color:purple;"></hr>
thats it hehe just change the background color thats it.
Adding the height doesn't work for me anymore as suggested in other answers (at least not working on Chrome 79), instead I've tried this and it works:
.thickhr{
border:0.1rem solid black;
height:0;
}
Related
I want to change the color of my hr tag using CSS. The code I've tried below doesn't seem to work:
hr {
color: #123455;
}
I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as suggested by #Ibu).
HTML 5 Boilerplate project in its default stylesheet specifies the following rule:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit }.
border-color works in Chrome and Safari.
background-color works in Firefox and Opera.
color works in IE7+.
I think this can be useful. this was simple CSS selector.
hr { background-color: red; height: 1px; border: 0; }
<hr>
hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
hr {
border-top: 1px solid red;
}
See the Fiddle.
Only border-top with color is enough to make the line in different color.
hr {
border-top: 1px solid #ccc;
}
<hr>
This will keep the Horizontal Rule 1px thick while also changing the color of it:
hr {
height: 0;
border: 0;
border-top: 1px solid #083972;
}
hr {
color: #f00;
background-color: #f00;
height: 5px;
}
After reading all the answers here, and seeing the complexity described, I set upon a small diversion for experimenting with HR. And, the conclusion is that you can throw out most of the monkeypatched CSS you wrote, read this small primer and just use these two lines of pure CSS:
hr {
border-style: solid;
border-color: cornflowerblue; /* or whatever */
}
That is ALL you need to style your HRs.
Works cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
No "I think this will work...", "you need to keep Safari/IE in mind...", etc.
no extra css - no height, width, background-color, color, etc. involved.
Just bulletproof colourful HRs. It's that simpleTM.
Bonus: To give the HR some height H, just set the border-width as H/2.
I believe this is the most effective approach:
<hr style="border-top: 1px solid #ccc; background: transparent;">
Or if you prefer doing it on all hr elements write this on you CSS:
hr {
background-color: transparent;
border-top: 1px solid #ccc;
}
hr {
background-color: #123455;
}
The background is the one you should try to change.
You can also work with the borders color. I am not sure; I think there are cross-browser issues with this. You should test it in different browsers.
You can add bootstrap bg class like
<hr class="bg-light" />
if u use css class then it will be taken by all 'hr' tags , but if u want for a particular 'hr' use the below code i.e, inline css
<hr style="color:#99CC99" />
if it's not working in chrome try below code:
<hr color="red" />
Some browsers use the color attribute and some use the background-color attribute. To be safe:
hr {
color: #color;
background-color: #color;
}
It's simple and my favorite.
<hr style="background-color: #dd3333" />
I'm testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:
hr.light {
width:70%;
margin:0 auto;
border:0px none white;
border-top:1px solid lightgrey;
}
<hr class="light" />
You should set border-width to 0; It works well in Firefox and Chrome.
hr {
clear: both;
color: red;
background-color: red;
height: 1px;
border-width: 0;
}
<hr />
This is a test
<hr />
Since i don't have reputation to comment, i will give here a few ideas.
if you want a css variable height, take off all borders and give a background color.
hr{
height:2px;
border:0px;
background:green;
margin:0px;/*sometimes useful*/
}
/*Doesn't work in ie7 and below and in Quirks Mode*/
if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or
hr{
height:0px;
border:0px;
border-top:2px solid blue;
margin:0px;/*useful sometimes*/
}
In both ways, if you set a width, it will always have it's size.
No need to set display:block; for this.
To be totally safe, you can mix both, 'cause some browsers can get confused with height:0px;:
hr{
height:1px;
border:0px;
background:blue;
border-top:1px solid blue;
margin:0px;/*useful sometimes*/
}
With this method you can be sure that it will have at least 2px in height.
It's a line more, but safety is safety.
This is the method you should use to be compatible with almost everything.
Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.
In the worst cases, you can try to add color:blue;.
In the worst of the worst cases, you can try to use a <font color="blue"></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.
With this method, you WILL want to do like this: <hr width="50" align="left"/>.
Example:
<span>
awhieugfrafgtgtfhjjygfjyjg
<font color="#42B3E5"><hr width="50" align="left"/></font>
</span>
<!--Doesn't work in ie7 and below and in Quirks Mode-->
Here is a link for you to check: http://jsfiddle.net/sna2D/
You can use CSS to make a line with a different color, example would be like that:
border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);
that code will display vertical grey line.
I like the answers setting border-top, but they are somehow still a little off in Chrome...
BUT if I set border-top: 1px solid black; and border-bottom: 0px; I end up with a truly single line (that also works fine with higher thickness).
Well, I am new in HTML, CSS and in Java but I tried my way which worked for me in all browsers. I have used JS instead of CSS which doesn't work with some browsers.
First of all I have given id="myHR" to HR element and used it in Java Script.
Here is the Code.
x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";
Code Works For older IE
Tried For Many Colors
<hr color="black">
<hr color="blue">
Using font colours to modify horizontal rules makes them more flexible and easy to use.
The color property isn't inherited by default, so the following needs to be added to hr's to allow color inheritance:
/* allow hr to inherit color */
hr { border: 1px solid;}
/* reusable colour modifier */
.fc_-alpha { color: crimson;}
normal hr:
<hr>
hr with <span class="fc_-alpha">colour modifier</span>:
<hr class="fc_-alpha">
You could do this :
hr {
border: 1px solid red;
}
<hr />
This s a test
<hr />
You can give the <hr noshade> tag and go to your css file and add :
hr {
border-top:0;
color: #123455;
}
<hr noshade />
This s a test
<hr noshade />
As a general rule, you can’t just set the color of a horizontal line with CSS like you would anything else.
First of all, Internet Explorer needs the color in your CSS to read like this:
“color: #123455”
But Opera and Mozilla needs the color in your CSS to read like this:
“background-color: #123455”
So, you will need to add both options to your CSS.
Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser.
Here is a sample code of what your CSS should look like to get the blue horizontal line.
hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}
Or you could just add the style to your HTML page directly when you insert a horizontal line, like this:
<hr style="background:#123455" />
Hope this helps.
I took a bet each way:
hr {
border-top: 1px solid purple;
border-color: purple;
background-color: purple;
color: purple;
}
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.
I want to change the color of my hr tag using CSS. The code I've tried below doesn't seem to work:
hr {
color: #123455;
}
I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as suggested by #Ibu).
HTML 5 Boilerplate project in its default stylesheet specifies the following rule:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit }.
border-color works in Chrome and Safari.
background-color works in Firefox and Opera.
color works in IE7+.
I think this can be useful. this was simple CSS selector.
hr { background-color: red; height: 1px; border: 0; }
<hr>
hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
hr {
border-top: 1px solid red;
}
See the Fiddle.
Only border-top with color is enough to make the line in different color.
hr {
border-top: 1px solid #ccc;
}
<hr>
This will keep the Horizontal Rule 1px thick while also changing the color of it:
hr {
height: 0;
border: 0;
border-top: 1px solid #083972;
}
hr {
color: #f00;
background-color: #f00;
height: 5px;
}
After reading all the answers here, and seeing the complexity described, I set upon a small diversion for experimenting with HR. And, the conclusion is that you can throw out most of the monkeypatched CSS you wrote, read this small primer and just use these two lines of pure CSS:
hr {
border-style: solid;
border-color: cornflowerblue; /* or whatever */
}
That is ALL you need to style your HRs.
Works cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
No "I think this will work...", "you need to keep Safari/IE in mind...", etc.
no extra css - no height, width, background-color, color, etc. involved.
Just bulletproof colourful HRs. It's that simpleTM.
Bonus: To give the HR some height H, just set the border-width as H/2.
I believe this is the most effective approach:
<hr style="border-top: 1px solid #ccc; background: transparent;">
Or if you prefer doing it on all hr elements write this on you CSS:
hr {
background-color: transparent;
border-top: 1px solid #ccc;
}
hr {
background-color: #123455;
}
The background is the one you should try to change.
You can also work with the borders color. I am not sure; I think there are cross-browser issues with this. You should test it in different browsers.
You can add bootstrap bg class like
<hr class="bg-light" />
if u use css class then it will be taken by all 'hr' tags , but if u want for a particular 'hr' use the below code i.e, inline css
<hr style="color:#99CC99" />
if it's not working in chrome try below code:
<hr color="red" />
Some browsers use the color attribute and some use the background-color attribute. To be safe:
hr {
color: #color;
background-color: #color;
}
It's simple and my favorite.
<hr style="background-color: #dd3333" />
I'm testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:
hr.light {
width:70%;
margin:0 auto;
border:0px none white;
border-top:1px solid lightgrey;
}
<hr class="light" />
You should set border-width to 0; It works well in Firefox and Chrome.
hr {
clear: both;
color: red;
background-color: red;
height: 1px;
border-width: 0;
}
<hr />
This is a test
<hr />
Since i don't have reputation to comment, i will give here a few ideas.
if you want a css variable height, take off all borders and give a background color.
hr{
height:2px;
border:0px;
background:green;
margin:0px;/*sometimes useful*/
}
/*Doesn't work in ie7 and below and in Quirks Mode*/
if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or
hr{
height:0px;
border:0px;
border-top:2px solid blue;
margin:0px;/*useful sometimes*/
}
In both ways, if you set a width, it will always have it's size.
No need to set display:block; for this.
To be totally safe, you can mix both, 'cause some browsers can get confused with height:0px;:
hr{
height:1px;
border:0px;
background:blue;
border-top:1px solid blue;
margin:0px;/*useful sometimes*/
}
With this method you can be sure that it will have at least 2px in height.
It's a line more, but safety is safety.
This is the method you should use to be compatible with almost everything.
Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.
In the worst cases, you can try to add color:blue;.
In the worst of the worst cases, you can try to use a <font color="blue"></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.
With this method, you WILL want to do like this: <hr width="50" align="left"/>.
Example:
<span>
awhieugfrafgtgtfhjjygfjyjg
<font color="#42B3E5"><hr width="50" align="left"/></font>
</span>
<!--Doesn't work in ie7 and below and in Quirks Mode-->
Here is a link for you to check: http://jsfiddle.net/sna2D/
You can use CSS to make a line with a different color, example would be like that:
border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);
that code will display vertical grey line.
I like the answers setting border-top, but they are somehow still a little off in Chrome...
BUT if I set border-top: 1px solid black; and border-bottom: 0px; I end up with a truly single line (that also works fine with higher thickness).
Well, I am new in HTML, CSS and in Java but I tried my way which worked for me in all browsers. I have used JS instead of CSS which doesn't work with some browsers.
First of all I have given id="myHR" to HR element and used it in Java Script.
Here is the Code.
x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";
Code Works For older IE
Tried For Many Colors
<hr color="black">
<hr color="blue">
Using font colours to modify horizontal rules makes them more flexible and easy to use.
The color property isn't inherited by default, so the following needs to be added to hr's to allow color inheritance:
/* allow hr to inherit color */
hr { border: 1px solid;}
/* reusable colour modifier */
.fc_-alpha { color: crimson;}
normal hr:
<hr>
hr with <span class="fc_-alpha">colour modifier</span>:
<hr class="fc_-alpha">
You could do this :
hr {
border: 1px solid red;
}
<hr />
This s a test
<hr />
You can give the <hr noshade> tag and go to your css file and add :
hr {
border-top:0;
color: #123455;
}
<hr noshade />
This s a test
<hr noshade />
As a general rule, you can’t just set the color of a horizontal line with CSS like you would anything else.
First of all, Internet Explorer needs the color in your CSS to read like this:
“color: #123455”
But Opera and Mozilla needs the color in your CSS to read like this:
“background-color: #123455”
So, you will need to add both options to your CSS.
Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser.
Here is a sample code of what your CSS should look like to get the blue horizontal line.
hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}
Or you could just add the style to your HTML page directly when you insert a horizontal line, like this:
<hr style="background:#123455" />
Hope this helps.
I took a bet each way:
hr {
border-top: 1px solid purple;
border-color: purple;
background-color: purple;
color: purple;
}
I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...
I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
I tried the old classic which probably many of you know:
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
Any ideas?
just do
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
adding an overflow: hidden; style should fix it also.
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
line-height: 1px;
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.