Two standard CSS properties control a scrollbar’s color and thickness:
.scrollbar {
overflow-x: auto;
scrollbar-color: #575966 transparent;
scrollbar-width: thin;
}When I first wrote this in 2023, those properties were largely a Firefox feature. They became available across major browsers in 2024. That is roughly the limit of what a site controls, because whether the scrollbar appears at all is decided by the operating system and the user, not by CSS.
What the standard properties give you
scrollbar-width accepts auto, thin, or none, and no arbitrary pixel value. Avoid none unless you provide another visible affordance and another way to scroll, because it removes an important cue.
For scrollbar-color, specify the thumb color first and the track color second.
- scrollbar: the entire scrollbar
- thumb: the draggable handle
- track: the background behind the thumb
Fine-tuning with WebKit pseudo-elements
Chrome, Edge, and Safari support the non-standard ::-webkit-scrollbar pseudo-elements, which give more control over details such as thickness and border radius.
.scrollbar::-webkit-scrollbar {
height: 6px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 9999px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #575966;
border-radius: 9999px;
}These pseudo-elements are not standardized. In supporting browsers, non-default values for scrollbar-color or scrollbar-width take precedence over ::-webkit-scrollbar-*. Establish the basics with the standard properties and treat the pseudo-elements as a progressive enhancement.
Visibility belongs to the operating system
Scrollbar visibility depends on the operating system, browser, user preferences, and input device. On macOS, scrollbars commonly appear only while scrolling when a trackpad is in use. Connecting a mouse or enabling “Always show scrollbars” changes the result in the same browser.
On Windows, overlay scrollbars and accessibility settings also change their appearance and the space they occupy.
A site cannot guarantee that a scrollbar will always look the same or stay visible. Respect the user’s settings and make horizontal continuation clear even when the scrollbar is temporarily hidden. You might partially reveal the next item, provide scroll buttons, or show the number of items.
Preventing layout shifts
If a classic scrollbar changes the available layout width when it appears, scrollbar-gutter can reserve the space in advance.
.scrollbar {
overflow: auto;
scrollbar-gutter: stable;
}stable reserves room in environments where the scrollbar occupies space. It does not force an overlay scrollbar to stay visible.
Closing note
A scrollbar is part of the user’s operating-system preferences and input setup. Light adjustments to color and thickness can support a brand, but trying to erase every environmental difference hurts usability and accessibility.
Start by asking whether the horizontal scrolling is necessary at all. If it is, adjust with the standard properties, keep the customization modest, and signal that the content continues without relying on the scrollbar alone.