CSS a straight horizontal line with 2 different colors

Question

It's 2013 now and im just wondering if there has come 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 grey :/ (im using chrome btw dont have any 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

Solved it! Simply adding border:none before

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

Answer 1

You could use the <hr> tag, and use both border-top and border-bottom:

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

The HTML is simply: <hr>.

jsFiddle here.

Answer 2

Possible alternative solutions:

1. CSS gradients - support info

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

Relevant CSS:

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

2. a :before pseudo-element & a box-shadow - support info

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

Relevant 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 info

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

Relevant 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; }

demo