Resize and Style Google Chrome Scroll bar without Extension

There are various extensions available in the Web Store to decorate their Chrome installation. [See 5 ultra-useful new tab extensions]. One extension that I found really good to stylize my chrome’s default scroll bar and that give me that little bit of extra screen space or just for the joy of personalizing is Simple Scroll Bar X. This looked good but while installing it chrome warned me that it can access all my websites data. Moreover, if you’re like me and don’t like installing extensions for every small thing, you can easily achieve the same result by simply editing Chrome’s Custom.css file.

You can find it at the following location:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

Once located, open it in a text editor and add the following code:

::-webkit-scrollbar-track-piece{
	background-color:#fff;
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:50px;
	background-color:#999;
	-webkit-border-radius:4px;
	outline:2px solid #fff;
	outline-offset:-2px;
	border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
	height:50px;
	background-color:#9f9f9f;
	-webkit-border-radius:4px;
}

Save the file and reload your tabs to see the change.

As you can see it’s basic CSS so, if you wish, you can easily modify the code to your liking. For example, if you find the scroll bar too thin change its width by editing this part:

::-webkit-scrollbar{
	width:16px;
}

You should be able to see this styled scroll bar on all pages, including scroll bars within a page.

Manually customizing your browser by editing style sheet, instead of installing extensions, eradicates the risk of someone tracking your browsing history and it is also less intensive on system resources.

If you’d like to further customize Chrome, check out this post on styling the Web Inspector.