Scrollbars Escaping Border Radius

Have you ever added a scrollbar to a rounded container just to realize that the scrollbar looks ugly and square? Thankfully, the solution is pretty simple with just an extra div.

Below is where we start, a simple rounded blue box that will scroll if the content is too tall.

<style>
  .box {
    height: 400px;
    border-radius: 8px;
    overflow-y: auto;
  }
​
  .content {
    background: lightblue;
    height: 200%;
  }
</style>
​
<div class="box">
  <div class="content"></div>
</div>

If we look at the result, it is functional, but the scrollbar looks pretty ugly as it doesn’t have the same border radius as the blue box.

To fix this, let’s move the overflow-y: auto to an inner div inside of our box, and then add overflow: hidden to the box. This will ensure the scrollbar properly conforms to our box border radius.

<style>
  .box {
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
  }
​
  .scroller {
    height: 100%;
    overflow-y: auto;
  }
​
  .content {
    background: lightblue;
    height: 200%;
  }
</style>
​
<div class="box">
  <div class="scroller">
    <div class="content"></div>
  </div>
</div>

Let’s see how it looks!