Customize scrollbar with CSS (WebKit ONLY)

custom_scrollbar.css

/**
 *  <div class="scrollbar" id="ex3">
 *      <div class="content">Example 3</div>
 *  </div>
 */

.scrollbar {
    width: 150px;
    height: 300px;
    background-color: lightgray;
    margin-top: 40px;
    margin-left: 40px;
    overflow-y: scroll; /* To get vertical scrollbar */
    float: left;
}
.content {
    height: 450px;
}

/* Override default scrollbar */
#ex3::-webkit-scrollbar {
    width: 16px;
    background-color: #cccccc;
}
/* Customize Thumb */
#ex3::-webkit-scrollbar-thumb {
    background-color: #b03c3f;
    border-radius: 10px;
}
#ex3::-webkit-scrollbar-thumb:hover {
    background-color: #bf4649;
    border: 1px solid #333333;
}
#ex3::-webkit-scrollbar-thumb:active {
    background-color: #a6393d;
    border: 1px solid #333333;
}
/* Customize Track */
#ex3::-webkit-scrollbar-track {
    border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 0 0 6px gray inset;
}