Style the WebKit scrollbar

Four simple blocks of CSS let you control the appearance of scrollbars in WebKit browsers like Chrome and Safari.

The size of the scrollbar

::-webkit-scrollbar {
   width: 30px;
}

The scrollbar track's style

Since the scrollbar will only be styled in WebKit it's ok to use webkit prefixed attributes like --webkit-border-radius.

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
}

The scrollbar handle

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    background: rgba(0,0,0,0.2); 
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5); 
}

The scrollbar handle when the browser window is in the background

::-webkit-scrollbar-thumb:window-inactive {
     background: rgba(255,0,0,0.4); 
}

That's it!