How to style your scrollbar

P.S : This will only work in Google Chrome, Safari and RockMelt.
Sorry Mozilla Firefox users. :(

There are lots of people asking me how to make scrollbar like mine. Well because today i'm feeling awesome (LOL RANDOM MUCH) i will tell you how to do it. GIMME SUM DRUMROLLZZZ.

For my scrollbar, i used this code :

::-webkit-scrollbar {
width: 10px;
height: 10px;
background: #ffffff;

::-webkit-scrollbar-track-piece {

::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #54777B;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,1);

::-webkit-scrollbar-thumb:horizontal {
height: 0px;

::-webkit-scrollbar controls the entire unit of your entire scrollbar. background, width, height, you can control it through here.

::-webkit-scrollbar-track-piece styles the thin background where the scrollbar moves. i leave it empty there cause i want my background to be transparent.

::-webkit-scrollbar-thumb:vertical is the bar that goes up and down your screen. i put border radius on my scrollbar, and a little nice shade of shadow so it'll look real and 3D. Notice the vertical. Vertical is the one that controls the up and down on the right of your screen while horizontal controls right and left on the bottom of your screen (usually). i put ::-webkit-scrollbar-thumb:horizontal's height 0px cause i don't need a horizontal scrollbar.

Notice that my scrollbar has no up and down buttons on it. I have no buttons because i didn't put the code for it. If you wan't a button like the default one, you have to put this code :

::-webkit-scrollbar-button:end:increment {
height: 30px;
display: block;
background-color: black;

i set the height 30px and black background so it'll have a 30px black background button between your scrollbar. now change the style whatever you like and it'll do the trick.

well actually it has more features but so far that's all i know.

You see i'm a sucker at explaining so if you have any questions or curiosity just comment on this post or tag me on the tagboard.
Or if you want to, visit this website for more details.

You may also like


  1. Susan, just to let you know that the customised scrollbar will only be viewable in browsers that make use of Webkit browser engines such as Chrome and Safari. It will not show up in other browsers. So if you want it to show on Firefox (or other Gecko browsers) as well, you'll have to include the -moz- prefix. :D

  2. oh really? thank you so much for the info! :D

  3. cool! :)) Can we have your permission to use the same scroll? don't worry we'll change the color and stuffs :)