How do I add a border to the scroll bar track?

I searched and couldn’t find anything T_T

Repl link:

::-webkit-scrollbar-track {
    border-left: 1px solid var(--outline-dimmest);

/* Works fine on the "thumb", but not on the track */
::-webkit-scrollbar-thumb {
    border-left: 1px solid var(--outline-dimmest);
1 Like

@QwertyQwerty88 have you read this? html - Apply Border-Radius To Scrollbars with CSS - Stack Overflow. The solution says to put a div over it to make a custom scroll bar.

So how exactly do I put a div around the scroll bar?

@QwertyQwerty88 how about this? Custom Scrollbars In CSS - Ahmad Shadeed.

Positioning to the right side (you can fiddle with hiding when not scrolling).

Try this:

.section::-webkit-scrollbar {
  width: 16px;

.section::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;

.section::-webkit-scrollbar-thumb {
  background-color: #d4aa70;
  border-radius: 100px;


@QwertyQwerty88 I assume by the shrugging it isn’t working? Oh wait its that Repl, lemme help.

Well, yeah, there’s no border on the track

So basically the problem is that ::-webkit-scrollbar-track has no border-left property, just border


@QwertyQwerty88 I was no use, I can’t see custom scroll bars :frowning_face:.

Cause ::-webkit-scrollbar only works on like Chrome and I think a couple other browsers

@QwertyQwerty88 so not Safari?

@QwertyQwerty88 so yeah not safari :frowning_face:, I wish there was a way to do it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.