Добавить обводку / контур на пользовательскую полосу прокрутки

Question

У меня есть пользовательская полоса прокрутки, к которой я хотел бы добавить обводку / контур. Я не нашел ни одной статьи о том, как это сделать, и «обводка» или «обводка», использующие CSS, похоже, помогают. Возможно ли это сделать?

JSFiddle: https://jsfiddle.net/hd2u4gs3/

<div id="box"></div>

body {
    background: black;
}

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

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: #7e7e7e;
    stroke: yellow;
    stroke-width: 3px;
    height: 80px;

}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}

#box {
    height: 10000px;
}

Answer 1

Если я не ошибся, вам нужно набросать вокруг большого пальца полосы прокрутки, пожалуйста, проверьте решение ниже

body {
  background: black;
}

::-webkit-scrollbar {
  width: 23px;
  background: red;
}

::-webkit-scrollbar-track {  
  background: red;
  border: 4px solid #fff;
  
  border-bottom: none;
  border-top: none;
  
}

::-webkit-scrollbar-thumb {
  background: #7e7e7e;
  stroke: yellow;
  stroke-width: 3px;
  height: 80px;
  border: 4px solid yellow;
  border-bottom: none;
  border-top: none;

}

::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
  border: 3px solid green;
  border-bottom: none;
  border-top: none;
}

#box {
  height: 10000px;
}

<div id="box"></div>

Answer 2

Как насчет простого добавления правой рамки в поле?

body {
  background: black;
  margin: 0;
}

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

::-webkit-scrollbar-track {
  background: black;
}

::-webkit-scrollbar-thumb {
  background: #7e7e7e;
  stroke: yellow;
  stroke-width: 3px;
  height: 80px;

}

::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

#box {
  height: 10000px;
  border-right: 1px solid grey;
}

    <div id="box"></div>

Или просто добавьте border-left к треку: https://jsfiddle.net/owuc4jdf/

::-webkit-scrollbar-track {
  background: black;
  border-left: 1px solid green;
}