![Bramus](https://web.dev/images/authors/bramus.jpg) Bramus [X](https://twitter.com/bramus) [GitHub](https://github.com/bramus) [Mastodon](https://front-end.social/@bramus) [Bluesky](https://bsky.app/profile/bram.us) [Homepage](https://www.bram.us/)


Published: Feb 1, 2025

<br />

> [!TIP]
> **Celebration:** This web feature is available in all three major browser engines, and is **Baseline Newly available** as of December 11, 2024.

<iframe src="https:///frame/blog/baseline-scrollbar-props/index_c0c2e1162f7b19187a4c7c53efdf17d4ea1892e1511b9f28120e2550012f2460.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>
<iframe src="https:///frame/blog/baseline-scrollbar-props/index_3f03ae8562e31e75b8e8797931930eec16251788d0cc2f113fed0d56b9d7afe1.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

With the `scrollbar-gutter` property you can reserve space for the scrollbar even when no scrollbar is needed. This prevents a layout shift should a scrollbar become necessary. This property only has an effect when [classic scrollbars](https://developer.chrome.com/docs/css-ui/scrollbar-styling#classic_and_overlay_scrollbars) are used.

Using `scrollbar-width` you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.
<iframe height="670" style="width: 100%;" scrolling="no" title="Scrollbar styling: scrollbar-color" src="https://codepen.io/web-dot-dev/embed/LEPqaON?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

Learn more about scrollbars and how to style them in [scrollbar styling](https://developer.chrome.com/docs/css-ui/scrollbar-styling).

> [!NOTE]
> **Note:** This blog post initially stated that `scrollbar-color` instead of `scrollbar-gutter` became Baseline. This error has been corrected.