utilities
CSS Custom Scrollbar
Style browser scrollbars with custom colors, width, and border-radius using ::-webkit-scrollbar.
Custom scrollbars can reinforce your design system and improve visual polish. This snippet uses the ::-webkit-scrollbar pseudo-elements (Chromium and Safari) alongside the standard scrollbar-width and scrollbar-color properties (Firefox) for cross-browser coverage.
Usage Note
Apply the global styles to :root or body for site-wide custom scrollbars, or scope to .custom-scroll for specific containers. The ::-webkit-scrollbar family works in Chromium and Safari but not Firefox — use scrollbar-width + scrollbar-color for Firefox.
Tags
#scrollbar#webkit#custom#styling#overflow