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

I have tried like:

element::-webkit-scrollbar-corner {
    border-bottom-right-radius: 20px !important;
}

but it is not working ..

CodePudding user response：

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 >
  <div >
    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>

CodePudding user response：

Better way is to wrap the scroll-view into a view and apply border-radius to the outer view like below.

<div >
  <div >
    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

And then apply styles

<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;
}

It would look something like this. [screenshot of output][1]