<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>HOW TO STYLE SCROLLBAR WITH PURE CSS</h2> </div> <div class="main"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctioLorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius possimus ex recusandae eos tempora excepturi. Ratione sit doloremque voluptate neque voluptates quas fuga est, assumenda saepe voluptatem explicabo debitis distinctio....</p> </div> </div>

body{ height: 100vh; display: grid; place-items: center; } h2{ text-align:center; } .main{ padding: 30px; background-color: cornsilk; color: darkslategrey; width: 350px; margin: 0 auto ; height: 500px; overflow: auto; } .main > p { font: italic bold 16px/30px Georgia, serif; text-align: center; } .main::-webkit-scrollbar{ width: 15px; } .main::-webkit-scrollbar-track{ box-shadow: inset 1px 1px 5px rgba(0,0,0,0.2); border-radius: 30px; } .main::-webkit-scrollbar-thumb{ background:linear-gradient(red, yellow); border-radius: 30px; }