title: css borders in chrome too thick
body: <p>I have a problem that happens only in Google Chrome. The borders appear to be "too thick". In Firefox, everything seems normal (I've tested in chrome and firefox only so far).</p>
  
  <p>As you can see on the image, there are 2 problems:</p>
  
  <p>1) upper arrow: the borders are to thick (it is 1px solid #aaa). When I draw a table with css, the borders are normal. This happens only with div's and form input fields. </p>
  
  <p>2) lower arrow: the background of the inner div slightly goes above the border of the outer div.</p>
  
  <p><a href="https://i.stack.imgur.com/n1tkn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n1tkn.png" alt="Image"></a></p>
  
  <p>Could this be a bug in Chrome?</p>
  
  <pre><code>.outer-div{
      border: 1px solid #aaa;
      box-sizing: border-box;
  }
  .outer-div &gt; .inner-div{
      padding: 5px;
      background: linear-gradient(#eee,#ddd);
  }
  </code></pre>
  
  <p>EDIT: the code that produces the results where the lower arrow is pointing at.</p>
  
  <pre><code>.calendar-events-block{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin: 15px 0;
      border: 1px solid #aaa;
  }
  
  .calendar-events-block &gt; .events{
      flex: 1 1 auto;
  }
  
  .calendar-events-block &gt; .events &gt; .title{
      padding: 10px;
      font-weight: 700;
      border-bottom: 1px solid #aaa;
      background: linear-gradient(#eee,#ddd);
  }
  </code></pre>
  
  <p>EDIT 2: If I zoom out to 90%, everything seems normal (like in Firefox).</p>
  
  <p>EDIT 3: a jsfiddle (<a href="http://jsfiddle.net/p31ajt48/" rel="nofollow noreferrer">http://jsfiddle.net/p31ajt48/</a>) with the problem.</p>
  
  <p>EDIT 4: Funny detail: when I zoom in or out, the problem with the "overflow" (the background of the title that goes over the border) dissapears.</p>
  
  <p>Another screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/7I1Ce.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7I1Ce.png" alt="enter image description here"></a></p>
  
  <p>Left you have a table, at the right you have some divs. The border of the table = 1px solid #aaa, the border of the divs = 1px solid #aaa, but the tabel borders are much thinner than the div borders.</p>