title: CSS a straight horizontal line with 2 different colors
body: <p>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?</p>
  
  <pre><code>div.linetop { border-top: 1px solid #111111; }
  div.linebottom { border-top: 1px solid #292929; }
  
  // make a line
  &lt;div class="linetop"&gt;&lt;/div&gt;
  &lt;div class="linebottom"&gt;&lt;/div&gt;
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):</p>
  
  <p>Tried both:</p>
  
  <pre><code>hr {
  border-top: 1px solid #111111; 
  border-bottom: 1px solid #292929; 
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>hr {
  display: block;
  height: 0;
  padding: 0;
  border-top: 1px solid #111111; 
  border-bottom: 1px solid #292929; 
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/JdNQo.png" alt="enter image description here"></p>
  
  <h1>Edit</h1>
  
  <p>Solved it! Simply adding border:none before</p>
  
  <pre><code>hr {
  border: none;
  border-top: 1px solid #111111; 
  border-bottom: 1px solid #292929; 
  }
  </code></pre>