CSS Scrollbar Styler
scrollbar-color sets the thumb and track colors. scrollbar-width sets how wide the scrollbar is. Both are standard CSS, so they work in Firefox too. The old ::-webkit-scrollbar pseudo-elements never did.
scrollbar-color.Scroll this box. The scrollbar uses exactly the CSS above, with no ::-webkit-scrollbar rules.
Firefox has supported both since version 64 and Chrome and Edge since 121. Safari added scrollbar-width in 18.2 and scrollbar-color in 26.2.
Browsers that don't recognise a property ignore it, so the default scrollbar shows. Nothing breaks.
Set the colors to something with enough contrast against the track. A thumb that blends into the background is hard to find.
Use scrollbar-gutter: stable if the layout shifts when a scrollbar appears.
Keep going. There is more text here so the box overflows.
A single long line so this box scrolls sideways: scrollbar-color and scrollbar-width apply to both axes at once, so you can't style them separately.
Applied to * in the snippet, but you can scope it to any scroll container. Pass the same two properties to html to style the page scrollbar.
scrollbar-color Browser Support
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.