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;
}
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
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 have a button element where I apply a css class which adds border color to the various sides of the button.
This worked in the previous IE versions, but not in IE 9
HTML:
<button class="hello-button">Hello, World</button>
CSS:
.hello-button {
border-width: 2px;
border-style: solid;
border-color: #eee #a9a9a9 #a9a9a9 #eee;
}
Is this a known issue and are there workarounds besides of the border-style: outset;
I have tried various combinations but it seems like you can not any longer style the borders of the button element.
Edit: formating
If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders
Works:
.hello-button {
border-top: 2px solid #eee;
border-right: 2px solid #a9a9a9;
border-bottom: 2px solid #a9a9a9;
}
Doesn't Work:
.hello-button {
border-top: 2px solid #eee;
border-right: 2px solid #a9a9a9;
border-bottom: 2px solid #a9a9a9;
border-left: 2px solid #eee;
}
Unless there's a valid (or at least spec'd) reason for this behavior, it looks like a bug to me...
This one is weird. It actually works if you don't specify border-style. IE9 will then give you a solid border, but other browsers will do all kinds of different things.
But it goes back to working if you specify border-radius (in addition to border-style).. So go on and treat yourself to some modern CSS styling :)
Of course this is not ideal if you want a perfectly square button, but you can set a low value for the radius (double check how it looks, though).
It does look like a bug. Can you define a document compatibility mode for an older version of IE?
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Looks like a bug. Since I controll the server I solved it by setting a X-UA-Compatible response header to IE=EmulateIE8
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#Servers