Scrollbar track thinner than thumb

Question

I am trying to style a scrollbar using css and I want to achieve the following look (ignore the background):

In other words, I want the thumb to be thicker than

Answer 1

Here is nearly matching code with css. You just have to change the color or add image in ::-webkit-scrollbar-thumb try small image if you want and you may also need to adjust the position.

 .container {
      margin: 40px auto;
      width: 1000px;
      height: 200px;
      overflow-y: scroll;
    }
    .container::-webkit-scrollbar {
      width: 20px;
    }
    .container::-webkit-scrollbar-track {
      background: tomato;
      border-left: 9px solid white;
      border-right: 9px solid white;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);      
      
         /*background-image:url( http://i.imgur.com/ygGobeC.png);*/
    }
    .container .item {
      height: 20px;
      margin-bottom: 5px;
      background: silver;
    }
    .container .item:last-child {
      margin-bottom: 0;
    } 
    .container {
        direction:rtl;
      }