Change size of scrollbar thumb with CSS

Question

I want to get a scrollbar with a thumb larger than the track. I can change the color, the opacity, everything, but I don\'t know how to change the size of the thumbs and the

Answer 1

Another way to do it is assigning border on either side of the track

  border-left: 3px solid white;
  border-right: 3px solid white;

CSS

.cute_scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #f8bbd0  ;

}

.cute_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px #f06292 ;
    border-radius: 10px;
    background-color: #f8bbd0  ;

    // Add Border on Track
    border-left: 3px solid white;
    border-right: 3px solid white;

}

.cute_scroll::-webkit-scrollbar-thumb
{
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 px #ad1457 ;
    background-color: #e91e63   ;

}

Result

https://codepen.io/hiteshsahu/pen/eGQOwJ