Loading...
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!
