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

[QwertyQwerty88]

Question:
I searched and couldn’t find anything T_T

Repl link:
https://replit.com/@InspireAndCode/InspireAndCode#static/css/style.css

::-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);
}

[SalladShooter]

@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.

[QwertyQwerty88]

@SalladShooter

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?

[SalladShooter]

@QwertyQwerty88 how about this? Custom Scrollbars In CSS.

@QwertyQwerty88

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

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]

[SalladShooter]

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

[QwertyQwerty88]

@SalladShooter

I assume by the shrugging it isn’t working?

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

[QwertyQwerty88]

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

[SalladShooter]

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

[QwertyQwerty88]

@SalladShooter

I can’t see custom scroll bars

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

[SalladShooter]

@QwertyQwerty88 so not Safari?

[QwertyQwerty88]

List of web browsers | WebKit-based

[SalladShooter]

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