A practical CSS scrollbar style uses standardized properties first, then adds browser-specific selectors when you need precise control over the track, thumb, or hover state. The standard layer works across modern Firefox and Chromium-based browsers; WebKit pseudo-elements provide finer visual control where supported.

Apply the rules to the element that owns the scrolling area. Styling the scrollbar changes its appearance, not the way users scroll with a wheel, touchpad, keyboard, or touch input.

CSS scrollbar style: Start with standardized color and width

Set scrollbar-color and scrollbar-width

scrollbar-color accepts the thumb color first and the track color second. scrollbar-width supports auto, thin, and none. Use none only when another visible scrolling method is available.

Example: .scroll-panel { scrollbar-color: #52606d #e8edf2; scrollbar-width: thin; }

These properties are the preferred baseline for a scrollbar CSS style because they are standardized rather than tied to one rendering engine.

Know what Firefox and Chromium support

Firefox uses these standardized properties as its main scrollbar styling interface. Current Chromium-based browsers also support them, while older Chromium versions may require the WebKit layer below. Keep the standard declarations in your stylesheet so browsers that do not understand WebKit selectors still receive a useful color and width.

Scrollbar CSS style: Style the track and thumb with WebKit pseudo-elements

WebKit scrollbar pseudo-elements are a separate compatibility layer, not a universal cross-browser standard. They are useful in Chromium-based browsers and WebKit-based browsers such as Safari, while Firefox relies on the standardized properties.

Target the WebKit scrollbar, track, and thumb

::-webkit-scrollbar controls the scrollbar’s width and height. ::-webkit-scrollbar-track styles the channel behind the thumb, and ::-webkit-scrollbar-thumb styles the draggable control. A border on the thumb can create visual spacing between it and the track.

Example: .scroll-panel::-webkit-scrollbar { width: 12px; height: 12px; } .scroll-panel::-webkit-scrollbar-track { background: #e8edf2; } .scroll-panel::-webkit-scrollbar-thumb { background: #52606d; border: 3px solid #e8edf2; border-radius: 999px; }

Use hover styles without changing scroll behavior

Change only visual properties for interaction feedback. Example: .scroll-panel::-webkit-scrollbar-thumb:hover { background: #334e68; } This makes the thumb easier to identify without changing overflow, dimensions, or scrolling mechanics.

Custom scrollbar CSS for one overflow container

Attach rules to a named scrolling element

Give the intended container a class, then apply both standard and WebKit rules to that class. Example markup: <div class=”scroll-panel”>Long content goes here.</div>

The complete custom scrollbar CSS can be written as: .scroll-panel { max-height: 18rem; overflow: auto; scrollbar-color: #52606d #e8edf2; scrollbar-width: thin; } .scroll-panel::-webkit-scrollbar { width: 12px; height: 12px; } .scroll-panel::-webkit-scrollbar-track { background: #e8edf2; } .scroll-panel::-webkit-scrollbar-thumb { background: #52606d; border: 3px solid #e8edf2; border-radius: 999px; } .scroll-panel::-webkit-scrollbar-thumb:hover { background: #334e68; }

Keep overflow, height, and width declarations separate

The max-height and overflow: auto declarations create the scrolling area; the scrollbar rules only style it. Use overflow-x and overflow-y separately when horizontal and vertical behavior must differ. Avoid applying these selectors to * unless every scrollbar on the page should match.

HTML scrollbar styling: Build fallbacks and interaction states

Let standard rules remain the fallback

Place scrollbar-color and scrollbar-width on the scrolling element first, followed by WebKit pseudo-elements. Firefox will use the standard rules, while compatible Chromium and WebKit browsers can use the more detailed track and thumb declarations.

Test contrast, keyboard scrolling, and hover feedback

Keep the thumb visibly distinct from the track in its normal and hover states. Test long content with keyboard focus, including arrow keys, Page Up, Page Down, Home, and End. On touch devices, do not rely on hover feedback; the scrollbar should remain understandable and usable without it.