How can I give border-radius to the element having scrollbar? - html

Question

I have tried like:
element::-webkit-scrollbar-corner {
border-bottom-right-radius: 20px !important;
}
but it is not working ..

Answer 1

Better way is to wrap the scroll-view into a view and apply border-radius to the outer view like below.
<div class="view">
<div class="scroll-view">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla sed
commodi pariatur minima cumque autem, tenetur sit sapiente natus
facilis. Consequatur reiciendis omnis voluptates earum obcaecati quia
alias nulla fugiat! Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Nulla sed commodi pariatur minima cumque autem, tenetur sit
sapiente natus facilis. Consequatur reiciendis omnis voluptates earum
obcaecati quia alias nulla fugiat! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nulla sed commodi pariatur minima cumque
autem, tenetur sit sapiente natus facilis. Consequatur reiciendis omnis
voluptates earum obcaecati quia alias nulla fugiat! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Nulla sed commodi pariatur
minima cumque autem, tenetur sit sapiente natus facilis. Consequatur
reiciendis omnis voluptates earum obcaecati quia alias nulla fugiat!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla sed
commodi pariatur minima cumque autem, tenetur sit sapiente natus
facilis. Consequatur reiciendis omnis voluptates earum obcaecati quia
alias nulla fugiat! Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Nulla sed commodi pariatur minima cumque autem, tenetur sit
sapiente natus facilis. Consequatur reiciendis omnis voluptates earum
obcaecati quia alias nulla fugiat!
</div>
</div>
<style>
.view {
height: 200px;
width: 200px;
border-radius: 20px;
border: 1px solid red;
padding: 10px;
}
.scroll-view {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.scroll-view::-webkit-scrollbar {
width: 20px;
}
.scroll-view::-webkit-scrollbar-thumb {
background-color: red;
border: 4px solid transparent;
border-radius: 20px;
background-clip: padding-box;
}
</style>
It would look something like this.
screenshot of output

Answer 2

The simplest solution I can think of, is to wrap the element that has the scrollbar inside another element, and then to give "overflow: hidden" and "border-radius: 20px" to the outer element:
/* This is just to see the effect better */
body {
background-color: #444;
}
/* This will make sure that the scrollbar is on the inner element */
.internal {
height: 100%;
overflow-y: scroll;
}
/* This will cut the borders */
.wrapper {
width: 200px;
height: 100px;
border-radius: 15px;
overflow:hidden;
background-color: #fff;
}
<div class="wrapper">
<div class="internal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus quis sapien quis ultrices. Nullam et nibh in odio lacinia feugiat et et ipsum. Praesent condimentum consequat aliquam. Ut ac dignissim arcu, in pulvinar odio. Nunc posuere mi id orci tristique blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non rutrum lorem. Aliquam non urna at nulla elementum tincidunt quis vitae erat. Suspendisse vel erat nunc. Nunc ac cursus urna. Nunc cursus vestibulum lectus vel mollis. Sed elementum eget felis ut facilisis. Vivamus at mattis felis.
</div>
</div>