For designs requiring specific widths, gradients, or rounded corners, the -webkit-scrollbar family remains the go-to solution for Chromium-based browsers (Chrome, Edge) and Safari.
: This property takes two values: the color of the thumb (the draggable part) and the color of the track (the background). Use code with caution. styling scrollbar css
Note: Avoid scrollbar-width: none for primary content as it can severely hinder accessibility. Granular Control: Legacy -webkit- Pseudo-Elements For designs requiring specific widths, gradients, or rounded
Styling scrollbars with CSS has evolved from a fragmented, browser-specific task into a more standardized process. As of 2026, developers can use a mix of modern standard properties and legacy -webkit- pseudo-elements to ensure broad compatibility and a consistent look across all major browsers. The Modern Standard: scrollbar-color and scrollbar-width For designs requiring specific widths