Resize and Style Google Chrome Scroll bar without Extension

Styled Chrome Scroll barThere 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:

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

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

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

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

	outline:2px solid #fff;
	border: 2px solid #fff;

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:


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. 

Did you find this article useful -

Filed under Google Chrome Tricks. Posted by Abhishek on 30th August 2011.

Leave a Comment:

Your email address will not be published. Required fields are marked *


Im running Ubuntu 11.10 and I cant find “~/.config/chromium/Default/User\ StyleSheets/Custom.css”.
Any suggestions ?

@Greg, If not make your own custom.css at that location.

Get Google Updates

Every Sunday, we send out "Google This Week" newsletter which covers all the latest and important updates from Google. First, we curate information from authentic and verified sources and then write the newsletter in an easy to understand format with images and summary for each update. View Sample ›

Join 9000+ subscribers following their favorite company in a simpler and easier way. Join Now ›