How to make the padding in scrollbar? CSS - css

Question

I've tried everything, searched the whole stack overflow and google.
Can someone help me to make this particular type of scrollbar?
When I use the border-right/top/bottom to make the spaces around it, it breaks the border-radius and gets ugly. As a reference, it's the same scrollbar used in Googledocs, a slim, rounded and doesn't touch the margins of the page: https://docs.new/
Here's the image: rounded, slim and not touching
So far I got:
::-webkit-scrollbar {
background: #262338;
width: 6px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
background: #6E7191;
border-radius: 6px;
height: 48px;
}

Answer 1

::-webkit-scrollbar {
width: 10px;
height: 10px;
border-radius: 34px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 16px;
}
This would get you the main design of the scrollbar you are looking. This is what I used on my website. Hope this is the design you want!

Answer 2

Scrollbar Padding
I think you'll have to use a container to accomplish the not touching part of your requirements.
Chrome vs Firefox
Be aware that the support to adjust the scrollbar is very limited in firefox compared to chrome browsers. The result of it will not show up in this snippet, nor on websites like jsfiddle. Rounded corners are impossible to achieve in firefox without using your own implementation or a third party library like thisone for example.
Example
body {
background-color: #14142B;
}
/* FIREFOX */
html {
scrollbar-width: thin;
scrollbar-color: #6E7191 #262338;
}
/* CHROME */
::-webkit-scrollbar {
width: 12px;
border-radius: 34px;
}
::-webkit-scrollbar-track {
background: #262338;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: #6E7191;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
::-webkit-scrollbar-thumb:hover {
background: #7E81A1;
}
.container {
margin: 1.5rem .5rem;
overflow-y: scroll;
max-height: calc(100vh - 3rem);
}
.content {
height: 25rem;
}
hr {
border: 0;
border-top: 2px solid #201F36;
}
.filler {
height: 3rem;
}
<div class="container">
<div class="content">
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
</div>
</div>