How to style <hr> to have multiple colors?

Question

I need to create <hr /> such as this:

. I am working with bootstrap and I have been searching for a long time on the getbootstrap page and on the internet as well. I can't find what I am looking for, so I hope some of you will know how to make this.

As I said it needs to be with bootstrap or simple css, less and scss are not allowed.

Thanks in advance

Answer 1

Another option is to use linear-gradient as background:

hr.colored {
  border: 0;   /* in order to override TWBS stylesheet */
  height: 5px;

  background: -moz-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%);  /* FF3.6+ */
  background: -webkit-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* W3C */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<hr class="colored" />

Answer 2

You could create a container of 100% width with 10 span inside, each one of 10% of the total width. Then apply the background color you like on each span.

This way it will be fluid and you can easily wrap it inside another container to make it fill its width and not to be 100% of the page.

Each span can be targeted by adding a different class to each one or if you like you could also use span:nth-child(1), span:nth-child(2) etc.

UPDATE

I don't really get the upvote in the answer of Shaun Loftin as the background-color applied to <hr> will work only on certain versions of Chrome. For example now on Linux I cannot see the hr coloring at all using background-color:red;

One thing for sure that even inside HTML5 Boilerplate they used this code for styling <hr> cross browser:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid red;
    margin: 1em 0; padding: 0; }

Use this if you don't want to change HTML element:

DEMO with hr element http://jsfiddle.net/a_incarnati/gna7r4L8/83/

OTHERWISE you can emulate the hr with another element. It's up to you.

span { display:block; width:10%; float:left; height:5px;}
.line{
    width:100%;
}
.color-1{
    background:green;
}
.color-2{
    background:yellow;
}
.color-3{
    background:purple;
}
.color-4{
    background:red;
}
.color-5{
    background:orange;
}
.color-6{
    background:lightgreen;
}
.color-7{
    background:gold;
}
.color-8{
    background:brown;
}
.color-9{
    background:lightblue;
}
.color-10{
    background:lightgrey;
}

<div class="line">
    <span class="color-1"></span>
    <span class="color-2"></span>
    <span class="color-3"></span>
    <span class="color-4"></span>
    <span class="color-5"></span>
    <span class="color-6"></span>
    <span class="color-7"></span>
    <span class="color-8"></span>
    <span class="color-9"></span>
    <span class="color-10"></span>
</div>

Answer 3

If I were you, I would create multiple hrs and assign them a wrapper so they all fit together. You could assign each hr a different id and then call them using HTML. Then, using CSS assign them each a different background color.

For example:

HTML:

<hr id="red"><hr id="blue">

CSS:

#red {background-color:red;}
#blue {background-color:blue;}

FIDDLE

---

You could also style them inline with HTML without an external stylesheet. It would look something along the lines of:

HTML:

<hr style="background-color:red"><hr style="background-color:blue">

FIDDLE

---

I kind of did something along the lines of this, check out this fiddle I made a while back which might pertain to what you are looking at. Hope this helped!

Answer 4

you can style your <hr> background with a linear gradient. Try this

hr {
  border: 0; 
  height: 1px;
  background: linear-gradient(to right, red, yellow, green);
}

see it in action here http://jsfiddle.net/es49mmcb/1/