How To Change The Color Of Scrollbars Using CSS ?

So you have made all of your template with two cool colors of your choice, added one of you favorite web font and now only one thing is annoying you that is your browser's scroll bar color.
And the question arising up in your mind is how can i change the scrollbar color.

Can i change the scrollbar color ?

... and the answer is yes you can, with newest CSS3 and -webkit- it is possible to change the scrollbar color,style and background.

How can i change the scrollbar color ?

1. For chrome and safari you can change the scrollbar colors using -

/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

2.But I have found another solution to this with adding some styles to it -

1. Rounded corners :

::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 3px; }

2. Square corners with border style :

::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}

Just add these styling rules to your css flile or add them in < style > tags and paste in head and this will work like magic.
So this way you can add amazing styles to your Blog or Website template and get rid of that old looking scrollbar.
If you have got any query regarding this post leave in the comments below.