title: How do I disable sub-pixel rendering or force the browser to round properties to the nearest pixel?
body: <p>My problem as stated in the title is about chrome's sub-pixel rendering. Sometimes you want the browser to determine an element's proper height or width so it takes up all the available space. And that's how floating point values appear. When the numbers after the decimal are high, it seems to get imprecise and make weird spacings. Changing the box-border property doesn't change the result. I made a codepen showing the problem, make sure to use a browser supporting sub-pixel rendering. As you zoom in you can see a space between the border and the pseudo-element.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  div {
    position: relative;
    
    width: 100.98px;
    height: 100px;
    
    margin-left: 2px;
    
    background-color: aqua;
    border-radius: 10px;
    border: solid 1px #000;
  }
  
  div:after {
    position: absolute;
    content:'';
    
    width: 15px;
    height: 100%;
    
    right: 0;
    
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;</code></pre>
  </div>
  </div>
  </p>