CSS vertical scrollbar padding left/right in UL possible?

I created a margin-right effect using border-right on the scrollbar-thumb:

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-right: 4px white solid;
  background-clip: padding-box;
}

The scrollbar appears to have width 4px and margin-right 4px.

Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/

You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.

Quoted from how to customise custom scroll?

body {
  min-height: 1000px;
  font-family: sans-serif;
}

div#container {
  height: 200px;
  width: 300px;
  overflow: scroll;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #AAAAAA;
}

div#content {
  height: 1000px;
  outline: none;
  padding: 10px;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #AAAAAA;
}

<div id="container">
  <div id="content" contenteditable>
    Click to type...
  </div>
</div>

This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.

.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
    width:16px;
    height:16px;
    background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
    border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
    border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
    border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
    border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
    .scroll::-webkit-resizer {background:inherit;
    border-right:8px solid rgba(255,255,255,.2); //optional
    border-bottom:8px solid rgba(255,255,255,.2); //optional
}