Styling a specific ScrollBar

Is it possible to style a ScrollBar for a specific element?

Yes, it is possible.

However,

It is necessary to take into account the features of the KEY browser of EACH version.
there's a discussion of the fox:
https://stackoverflow.com/q/6165472/4794368

The code below was checked in the latest version of FF.
taken from there

#qql {
    height: 200px;
    width: 50px;
    overflow: auto;
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
}

body {
  /*overflow: hidden;*/
}

<div id="qql">
q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>
</div>

You can change styles using :: - webkit-scrollbar

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

HTML

 <div class="container" id="custom-scrolbar">
      <div class="content"></div>
    </div>

CSS

.container{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.content{
    min-height: 450px;
}

#custom-scrolbar::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#custom-scrolbar::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}

#custom-scrolbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}