title: white corners webkit-scrollbar
body: <p><a href="http://jsfiddle.net/8quw3/" rel="noreferrer">Fiddle</a></p>
  
  <p>I am using <code>::-webkit-scrollbar</code> to make a custom scrollbar in Chrome. I have a <code>border-radius: 10px</code> and in doing that, there are white corners at the top:</p>
  
  <p><img src="https://i.stack.imgur.com/mban2.png" alt="It&#39;s kinda hard to see"></p>
  
  <p>Sorry, it's kinda hard to see since it's a scrollbar.</p>
  
  <p>I want the corners to be the same color as the header div (<code>#dadae3</code>). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?</p>
  
  <p>CSS (entire):</p>
  
  <pre><code>body {
    padding: 0;
    margin: 0
  }
  ::-webkit-scrollbar {
    width: 13px;
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #aeaeb5
  }
  ::-webkit-scrollbar-thumb {
    background: #dadae3;
    border-radius: 10px;
    border: 1px solid #aeaeb5
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #c4c4cc
  }
  ::-webkit-scrollbar-thumb:active {
    background: #aeaeb5
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style='background: #dadae3; width: 100%; height: 30px;'&gt;&lt;/div&gt;
  &lt;div style='width: 100%; height: 1000px'&gt;&lt;/div&gt;
  </code></pre>