html - Changing shape of scroll bar using CSS -

i want change shape of scroll bar in page. right common rectangle shaped 1 want kind of oval shape - rounded @ both top , bottom of rectangle.

how can achieve through css? or not possible @ all. looking supporting in ie10. css scroll bar 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;  } 

check out page starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. these work browsers use webkit unfortunately.

to rounded oval shape scrollbars can 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, can use jquery custom scrollbar seen on page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html