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

You can use a background image to make it look like the scrollbar is smaller than the thumb.

.custom_scrollbar::-webkit-scrollbar {
  width: 10px;
}
.custom_scrollbar::-webkit-scrollbar-track-piece {
  /* This image is smaller than the width of the scrollbar-thumb */
  background: url('scroll-bg.gif') center 0 repeat-y;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
  width: 10px;
  border: 2px solid #ffffff;
  background-color: #000000;
}