CSS Scrollbar Styling

Intermediate

CSS Scrollbars Styling owns the standardized visual controls for scrollbar color and thickness. It does not decide whether content overflows or becomes scrollable; those behaviors belong to CSS Overflow. It also does not expose a portable API for styling every internal scrollbar part.

Scrollbar styling is separate from scrolling

Overflow determines whether and how excess content is clipped or made reachable by scrolling. Scrollbar styling changes the appearance of the scrollbar controls that a user agent provides. Keeping those responsibilities separate makes debugging easier and avoids treating a visual scrollbar change as a change to scrollability.

?

Use scrollbar-color for thumb and track colors

scrollbar-color accepts auto or two colors. With two colors, the first is used for the scrollbar thumb and the second for the track, subject to the user agent and platform rendering. The property is inherited. On the root element its value is applied to the viewport; setting it on body is not the same propagation mechanism.

?

Use scrollbar-width for thickness, not custom geometry

scrollbar-width accepts auto, thin, or none. thin requests a thinner scrollbar while preserving a usable scrolling control. none removes the scrollbar display but does not remove the element’s scrollability, so authors must provide another clear way for users to discover and reach the overflowed content.

?

Do not build a fake scrollbar when standardized controls are enough

The CSS Scrollbars specification intentionally does not define a portable way to select every internal scrollbar part. The current specification specifically addresses non-standard scrollbar pseudo-elements such as the ::-webkit-scrollbar family: when scrollbar-width is not auto, user agents must ignore those alternative non-standard styling mechanisms. Foxipa therefore teaches scrollbar-color and scrollbar-width rather than presenting vendor-specific scrollbar internals as standard CSS.

Keep platform and user-agent control

Native scrollbars are part of the user-agent interface. The specification allows implementations to adapt rendering to the platform, color scheme, and user preferences. Authors should therefore describe the desired semantic styling rather than assuming an exact shape, thickness in pixels, or list of scrollbar subparts.

Specification boundary and maturity

CSS Scrollbars Styling Module Level 1 is included in CSS Snapshot 2026 as a Reliable Candidate Recommendation. Its scope is scrollbar visual styling—color and thickness—not layout or whether content is scrollable. CSS Overflow remains the owner of overflow and scrolling behavior.

Quick review

You should now be able to distinguish scrollbar styling from scrolling itself, use scrollbar-color for thumb and track colors, use scrollbar-width for standardized thickness control, avoid non-standard internal scrollbar pseudo-elements, and account for accessibility and user-agent preferences when changing native scrollbar presentation.