Candidate Recommendation Snapshot · css-scrollbars

CSS Scrollbars

2 properties defined by this specification, all known to at least one browser .

Modern CSS features in this module: scrollbar-color, scrollbar-width.

Read the Editor's Draft ↗ W3C Candidate Recommendation Snapshot ↗

Each feature in detail

`scrollbar-color`

Property Baseline: newly availablesince December 2025 Modern CSS: scrollbar-color

MDN The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

Live preview Example from MDN

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #000077 #bada55;
}

<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

Syntax

auto | <color>{2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: scroll containers
Inherited: yes
Percentages: n/a
Computed value: specified keyword or two computed colors
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting scrollbar-color
Chrome	121
Edge	121
Firefox	64
Safari	26.2
Chrome Android	121
Safari iOS	26.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scrollbar-width`

Property Baseline: newly availablesince December 2024 Modern CSS: scrollbar-width

MDN The scrollbar-width property allows the author to set the desired thickness of an element's scrollbars when they are shown.