Styling the default browser scroll bar using CSS

Default Scroll Bar

Add the below CSS code to your stylesheet

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

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

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

This is what you get, a more beautiful Scroll Bar

Lets add some round corners and increase the width

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

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

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

 This is what we get

Lets try to make a Mac like scroll bar

::-webkit-scrollbar {
 width: 10px; 
 background-color: rgba(0,0,0,0);
 -webkit-border-radius: 100px;
}

::-webkit-scrollbar:hover {
 background-color: rgba(0, 0, 0, 0.09);
}
 
::-webkit-scrollbar-thumb:vertical {
 background: rgba(0,0,0,0.5);
 -webkit-border-radius: 100px;
 background-clip: padding-box;
 border: 2px solid rgba(0, 0, 0, 0);
 min-height: 10px;
}

::-webkit-scrollbar-thumb:vertical:active {
 background: rgba(0,0,0,0.61); 
 -webkit-border-radius: 100px;
}

And here it is!