white corners webkit-scrollbar

Question

Fiddle

I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:

Sorry, it's kinda hard to see since it's a scrollbar.

I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?

CSS (entire):

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 } 

HTML:

<div style='background: #dadae3; width: 100%; height: 30px;'></div> <div style='width: 100%; height: 1000px'></div> 

Answer 1

You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); } 

Answer 2

You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".