How to Style the Scrollbar using CSS

In this example, we will learn how to style the scrollbar using CSS. We will be using ::-webkit-scrollbar pseudo-element that allows us to customize the browser's scrollbar and some CSS properties like height, width, background-color, and border-radius to customize the style of the scrollbar.

Prerequisites

• CSS height property
• CSS width property
• CSS background-color property
• CSS border-radius property

Example

Here, The scrollbar represents the right and bottom scrollbars. The width property adjusts the width of the right scrollbar and the height property adjusts the height of the bottom scrollbar. scrollbar-track is the track of the scrollbar in which they move. scrollbar-thumb is the scrollbar block that represents the present position of the contents on the overall page.

        ::-webkit-scrollbar {
            width: 15px;
            height: 15px;
        }

        ::-webkit-scrollbar-track {
            background-color: lightgray;
        }

        ::-webkit-scrollbar-thumb {
            background-color: red;
            border-radius: 10px;
        }

Output

Conclusion

In this example, we learned how to style the scrollbar using CSS. We used ::-webkit-scrollbar and some CSS properties to customize the browser’s scrollbar.