How can I color the white corner with 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: ```

```

Accepted Answer

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

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

How can I color the white corner with webkit-scrollbar?

Solution

Problem