How does cross-browser scrollbar styling work?

Firefox uses standard W3C `scrollbar-color` and `scrollbar-width`, while Chrome, Edge, and Safari use `::-webkit-scrollbar` pseudo-elements.

Can I style scrollbars on specific containers instead of globally?

Yes! Replace `*` with your specific class selector (e.g., `.my-scrollable-div`).

Does this work in dark mode?

Yes, pick dark track colors to eliminate bright default OS scrollbar tracks.

Can I round the scrollbar thumb corners?

Yes, customize the corner radius slider from 0px (sharp square) to 20px (pill capsule).

Is there any JavaScript involved?

No, scrollbar styling uses 100% native CSS declarations.

CSS Scrollbar Styler

Customize scrollbar track, thumb colors, hover styles, and roundness with modern CSS and WebKit fallbacks.

100% free
Private in browser
No signup
No watermarks

Thumb Color

Thumb Hover

Track Background

Width (10px)

Radius (6px)

Live Scroll Preview

Scroll down inside this box to test the scrollbar styling.

Modern CSS allows customization using standard W3C properties as well as WebKit pseudo-elements.

Your users will experience branded scrollbars matching your dark theme or design system.

Keep scrolling to check thumb movement, edge padding, and hover colors.

Almost at the bottom... Perfect scrollbar styling ready for copy and paste!

Generated Cross-Browser CSS

/* Modern W3C Standard (Firefox & modern browsers) */
* {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #18181b;
}

/* Chrome, Edge, Safari (WebKit & Chromium) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #18181b;
}

*::-webkit-scrollbar-thumb {
  background-color: #3b82f6;
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #2563eb;
}

Rate this tool

Be the first to rate — helps others and improves this page.

About CSS Scrollbar Styler

Customize scrollbar track, thumb colors, hover styles, and roundness with modern CSS and WebKit fallbacks. Use this free client-side tool on TheToolss with zero installation and complete privacy.

How to use CSS Scrollbar Styler

Pick thumb and track background colors
Adjust width and border radius sliders
Test scroll behavior in the live preview container
Copy CSS into your global styles or component stylesheet

Key features

Modern W3C and WebKit dual cross-browser support
Interactive live scroll preview area
Configurable thumb, track, and hover colors
Adjustable thumb width and curvature

Frequently asked questions

How does cross-browser scrollbar styling work?: Firefox uses standard W3C `scrollbar-color` and `scrollbar-width`, while Chrome, Edge, and Safari use `::-webkit-scrollbar` pseudo-elements.
Can I style scrollbars on specific containers instead of globally?: Yes! Replace `*` with your specific class selector (e.g., `.my-scrollable-div`).
Does this work in dark mode?: Yes, pick dark track colors to eliminate bright default OS scrollbar tracks.
Can I round the scrollbar thumb corners?: Yes, customize the corner radius slider from 0px (sharp square) to 20px (pill capsule).
Is there any JavaScript involved?: No, scrollbar styling uses 100% native CSS declarations.