There are two ways to style a scrollbar, and for a while yet you need both.
The standard properties, scrollbar-width and scrollbar-color, are two lines and work in Firefox, in
Chrome and Edge 121, and in Safari 18.2. They cannot do much: a width from a list of three, a thumb
colour and a track colour. No radius, no hover state, no inset.
The WebKit pseudo-elements are not standard and never will be, and they are what every older Chrome and
Safari understands. They can do anything, including the thing that makes a custom scrollbar look designed
rather than recoloured: a transparent border with background-clip: content-box, which insets the thumb
from the track without shrinking the area you can grab.
This writes both, standard first, so a browser that understands both follows the standard.
How to use
- Pick the standard width, then the WebKit size in pixels. Both are written.
- Set the colours. The hover colour only appears in the output when it differs from the thumb colour, since there is no hover state in the standard properties.
- Scroll the preview boxes. The second one scrolls sideways, where the bar takes its size from
heightrather thanwidth.
Example
A 10px bar with rounded corners and an inset thumb:
/* The standard properties first, so a browser that understands both
follows this rather than the WebKit pseudo-elements below. */
.scroller {
scrollbar-width: thin;
scrollbar-color: rgb(138 138 153) rgb(241 241 244);
}
/* Not standard, never will be, and still what older Chrome and Safari
understand. */
.scroller::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroller::-webkit-scrollbar-track {
background: rgb(241 241 244);
border-radius: 8px;
}
.scroller::-webkit-scrollbar-thumb {
background: rgb(138 138 153);
border-radius: 8px;
border: 2px solid transparent;
background-clip: content-box;
}
.scroller::-webkit-scrollbar-thumb:hover {
background: rgb(90 90 107);
background-clip: content-box;
}Choosing “none” replaces all of it with a hidden bar and a comment explaining what that costs, because hiding a scrollbar is a decision rather than a style.
Pitfalls
Hiding a scrollbar does not remove the scrolling. The content still moves, and nothing says so any more. Keyboard and trackpad users are fine; anyone looking for a bar, or dragging one, is not. Hide it only where another affordance shows there is more to see.
Thin is a smaller target. Somebody dragging a scrollbar with a mouse has less to aim at. That is the trade, and it is worth making deliberately rather than because thin looks tidier in a screenshot.
Most Mac users never see your work. macOS hides scrollbars until you scroll unless a mouse is attached, so a design that depends on the bar being visible is invisible to a large share of the audience.
Set both width and height. The vertical bar takes its size from width and the horizontal one from
height. Setting only width leaves a sideways scroller at the browser default, which looks like a bug.
Contrast applies here too. A thumb that barely differs from the track is a control nobody can find. It is a UI element, not a decoration, and the usual contrast minimum applies.
Styling the page scrollbar affects the whole page. Put the rules on the element that scrolls. Applying
them to html or body changes the window scrollbar, which is rarely what a component wanted.
::-webkit-scrollbar and scrollbar-color conflict where both work. In current Chrome, the standard
property wins when both are set on the same element, which is the behaviour this output relies on.
Compatibility
scrollbar-width and scrollbar-color work in Firefox 64, Chrome and Edge 121, and Safari 18.2. Before
those versions, only the WebKit pseudo-elements did anything, which is why both are written.
::-webkit-scrollbar works in Chrome, Edge, Safari and every Chromium browser, and has never worked in
Firefox. It is not on a standards track, and Chrome’s own guidance is to prefer the standard properties
where they suffice.
The preview cannot use inline styles for the scrollbar, because the pseudo-elements only exist in a stylesheet, so the block passes the values as custom properties and the stylesheet reads them. That is also why the preview can only show a subset of what the copied CSS does.
The stylesheet is built by one function and mirrored in PHP for the first paint, with a case file comparing the two on every build: the default, a hidden bar, an auto-width bar with matching hover, and an invalid keyword with a negative size.
Frequently asked questions
Why are there two syntaxes?
How do I hide a scrollbar but keep scrolling?
scrollbar-width: none and ::-webkit-scrollbar { display: none }.
Then add something else that shows the content continues: a fade at the edge, a partly visible next item,
or arrows.Can I style the scrollbar of the whole page?
html or body as the selector. Be careful: it is one of the few pieces of UI a user may
have deliberately configured in their operating system.Why does my rounded thumb look square?
border-radius on the thumb needs the track to be visible around it. Add an inset, which is the
transparent border trick, and the rounding becomes visible.