Here I've made the scrollbar's track take up less space than I'd normally have it take up. I do however want there to be a small region above and below the track which is not taken up by the track itself so the track can be an capsule-shaped container.

Sorry for the poor color contrast, but notice here that this region is a different color than the footer beside it. It's taking on the color of my body. I want this to be transparent so the color behind it comes through. Is this possible?

The relevant CSS:

::-webkit-scrollbar {
  width: 1.375rem;
  background-color: transparent; // doesn't work. it just inherits color of body
}

::-webkit-scrollbar-track {
  background: black;
  border-radius: 10px;
  margin: 2rem 0;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Edit: This scrollbar is for the whole page