title: 1 pixel is not 1 pixel when scaling is applied
body: <p>THIS IS A CSS RELATED QUESTION. I want to use Javascript only if I have to.</p>
  
  <p>How do I draw a div, which has a 1 pixel border no matter which device you view it on?</p>
  
  <p>If your OS has scaling enabled (which most users have, if they have a high resolution monitor), you will notice <strong>1 pixel is no longer 1 pixel</strong>. If you have 200% scaling enabled, <code>border: 1px solid black;</code> will draw a 2 pixel wide border. How can you confirm this? Add this property and value in your CSS: <code>transform: scale(0.5);</code>. What does that do? It basically scales everything down 50% of its original size.</p>
  
  <p>Now, how do I make sure that when my CSS values says <code>1px</code>, it will actually be 1 pixel?</p>
  
  <p>Here is my example:
  <a href="http://jsfiddle.net/o6x9pg6e/1/" rel="nofollow">http://jsfiddle.net/o6x9pg6e/1/</a></p>
  
  <pre><code>#container {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      /*transform: scale(0.5);*/
  }
  </code></pre>
  
  <p>Thank you</p>