scrollbar

There is no standard CSS property named scrollbar. Use the individual scrollbar properties, each with its own purpose and browser support.

Choose the property you need

• scrollbar-width chooses the scrollbar’s thickness with auto, thin, or none.
• scrollbar-color sets thumb and track colors.
• scrollbar-gutter reserves room for a classic scrollbar, helping prevent a layout shift when overflow changes.

A working scroll area

The box needs constrained space and enough content to overflow. Here the content is deliberately taller than the box.

<div class="notes" tabindex="0" role="region" aria-label="Scrollable notes">
  <p>First note</p>
  <p>Second note</p>
  <p>Third note</p>
  <p>Fourth note</p>
  <p>Fifth note</p>
</div>

.notes {
  max-height: 120px;
  overflow: auto;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}
/* Optional presentation */
.notes {
  border: 1px solid #64748b;
  padding: 1rem;
}
.notes p {
  margin: 1rem 0;
}

The area can be focused and scrolled with a keyboard. tabindex="0" is useful for compatibility with browsers that do not focus scroll containers automatically; the named region explains the extra stop.

Common mistakes

scrollbar: thin is invalid and ignored. Avoid hiding scrollbars from people who need a visible indication of more content. Overlay scrollbars can appear only during scrolling, depending on the operating system; reserving a gutter does not turn an overlay scrollbar into a classic one.

WebKit scrollbar pseudo-elements such as ::-webkit-scrollbar are nonstandard. Keep any use of them a progressive enhancement, and retain a usable default scrollbar.

Sources

MDN: CSS scrollbars styling describes the standardized properties and nonstandard alternatives.