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

I know it's an old thread, but I had same issue and since my background isn't solid color and scrollbar is to be used on multiple pages with different backgrounds I needed another solution. And I figured it out.

.scrollbar::-webkit-scrollbar {
  width: 7px; //Needed scrollbar thumb width to be 7px, so had to define whole scrollbar to be 7px wide.
};

.scrollbar::-webkit-scrollbar-thumb {
  background: brown;
};

.scrollbar::-webkit-scrollbar-track {
  background: black;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  background-clip: padding-box;
};

The trick is hidden in the "background-clip" part. Background-clip lets you define how much does background extends, and with padding-box it will let background extend up to border and not let it go under, so when you use transparent border, you're not getting the background color that is defined, but parent element background.

Hope this helps someone!