Changing shape of scroll bar using CSS

css, html

Solution

Check out this page for a good starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. These only work for browsers that use webkit unfortunately.

To get the rounded oval shape scrollbars you can do something like below:

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

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

Not tested, you can use a jQuery custom scrollbar as seen on this page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Problem

I want to change the shape of the scroll bar in my page. Right now it is the common rectangle shaped one but i want it to be kind of an oval shape - rounded at both top and bottom of the rectangle. How Can i achieve this through CSS? Or is this not possible at all. I am looking for supporting this in IE10. This is my css for the scroll bar that I have. ``` .scrollbar-vertical { top: 0; right: 0; width: 17px; height: 100%; overflow-x: hidden; scrollbar-3dlight-color:#999; scrollbar-arrow-color:white; scrollbar-base-color:white; scrollbar-face-color:#999; border-radius:5px 5px; } ```

Original source