White corners webkit-scrollbar

Question

Fiddle

I use ::-webkit-scrollbar to create a custom scrollbar in Chrome. I have border-radius: 10px , and at the same time there are white corners at the top:

Sorry, this is pretty hard to see as this is a scrollbar.

I want the corners to be the same color as the div heading ( #dadae3 ). Is there a way to get rid of white corners with CSS just without changing the styles of the scroll bar?

CSS (all):

 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 should set the pseudo element ::-webkit-scrollbar-corner , for example

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

Answer 2

You can set the background-color property for the -webkit -webkit-scrollbar scrollbar -webkit-scrollbar , by doing this, you can set the "corner color".