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

A css-only solution that does not use any images involves using the scrollbar borders to produce the desired effect. The trick is to match the scrollbar element's border colors to your container's background color. However, this won't work on complex backgrounds, like the OP's.

Example: https://jsfiddle.net/vsj6qb8c/6/

body {
  --container-background-color: #C7C7C7;
}

.outer {
    height: 150px;
    overflow-y: scroll;
  background-color: var(--container-background-color);
}

.force-overflow {
    min-height: 450px;
}

::-webkit-scrollbar {
    width: 20px;
  border-width: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: #757575;
  border-color: var(--container-background-color);
  border-width: 2px 9px 2px 9px;
  border-style: solid;
}

::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #51545E;
  border-color: var(--container-background-color);
  border-style: solid;
  border-width: 1px 7px 1px 7px;
}