Customize the Browser’s Scrollbar only with CSS

-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

1. ::-webkit-scrollbar the background of the bar itself.
2. ::-webkit-scrollbar-button the directional buttons on the scrollbar.
3. ::-webkit-scrollbar-track the empty space “below” the progress bar.
4. ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
5. ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.
6. ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.
7. ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.

::-webkit-scrollbar {
width:4px;
height:7px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:#F5F5F5;
}

::-webkit-scrollbar-thumb {
background-color:#000;
border:2px solid #555;
}