CSS - straight horizontal line with two different colors

Question

In 2013, they just wondered if there was a better way to achieve this. Is there a way to do this with just one element?

div.linetop { border-top: 1px solid #111111; } div.linebottom { border-top: 1px solid #292929; } // make a line <div class="linetop"></div> <div class="linebottom"></div> 

Edit

This is what happens with HR, the first pixel is gray: / (im using chrome btw has no other browsers):

Tried both:

 hr { border-top: 1px solid #111111; border-bottom: 1px solid #292929; } 

and

 hr { display: block; height: 0; padding: 0; border-top: 1px solid #111111; border-bottom: 1px solid #292929; } 

Edit

I decided! Just adding a border: none before

 hr { border: none; border-top: 1px solid #111111; border-bottom: 1px solid #292929; } 

Answer 1

You can use the <hr> and use both border-top and border-bottom :

 hr { border-top: 1px solid #111111; border-bottom: 1px solid #292929; } 

HTML is simple: <hr> .

jsFiddle here.

Answer 2

Possible alternative solutions:

1. CSS Gradients - Support Information

HTML : <div class='v1'></div>

Matching CSS :

 .v1 { background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%; background-size: 80% 2px; } 

2. a :before pseudo-element and a box-shadow - support information

HTML : <div class='v2'></div>

Matching CSS :

 .v2 { position: relative; } .v2:before { position: absolute; right: 10%; bottom: 20%; left: 10%; height: 1px; box-shadow: 0 1px #292929; background: #111; content: ''; } 

3 :before and :after pseudo-elements - support information

HTML : <div class='v3'></div>

Matching CSS :

 .v3 { position: relative; } .v3:before, .v3:after { position: absolute; right: 10%; bottom: 20%; left: 10%; height: 1px; background: #111; content: ''; } .v3:after { margin-bottom: -1px; background: #292929; } 

demonstration

Answer 3

You can use the <hr> and use border-top and border-bottom to determine the color of the two lines:

 hr { display: block; height: 0; padding: 0; border-top: 1px solid #08f; border-bottom: 1px solid #666; } 

Answer 4

CSS

 #hrtag { border-bottom: green 2px solid; border-top: red 2px solid; } 

HTML

 <hr id="hrtag"/> 

If you want this to be a class, just replace # with. and id for the class. In CSS, you can change the color the way you want. This has been tested in Chrome.

Answer 5

You would try a shadow shadow, for example:

HTML

 <div class="hr"></div> 

CCS

 .hr{ border-top: 1px solid #111; box-shadow: 0 1px 0 #292929; } 

Watch the demo.