Scrollbar Styler
Scroll this panel to see the styled scrollbar.
Every change below applies here immediately, using the same declarations printed in the CSS block.
The standard properties come first, then the WebKit pseudo-elements as a fallback for browsers that have not implemented them.
Firefox has supported scrollbar-width and scrollbar-color for years; Chrome and Safari added them more recently and still honour the pseudo-elements.
Keep the thumb and track far enough apart in contrast that the control stays visible — a scrollbar is an interactive element.
Scroll further.
And further still.
End of the sample content.
scrollbar-width property accepts only auto, thin or none — not a length.
Both syntaxes are written out because neither covers every browser on its own: scrollbar-width and scrollbar-color are the standard and are the only route in Firefox, while the ::-webkit-scrollbar pseudo-elements are the only way to set an exact pixel width or a corner radius. Where both apply, the standard properties win and the pixel width is ignored. Hiding a scrollbar entirely removes a visible affordance and is worth avoiding on anything a person needs to find.