Apply Border-Radius To Scrollbars with CSS

by

Put the content that needs to be scrolled in a div with overflow: auto. Around that content div put a div with your rounded corners and overflow: hidden.

Now you can see the scroll bar but its outer corners are hidden and
are not disturbing the rounded corners of the outer div.

Example:

// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);
.outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}
<div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>

More Related Contents:

  1. How to change scroll bar position with CSS?
  2. Add a horizontal scrollbar to an HTML table
  3. Why does vw include the scrollbar as part of the viewport?
  4. How can I prevent the scrollbar overlaying content in IE10?
  5. Hide html horizontal but not vertical scrollbar
  6. Prevent scroll-bar from adding-up to the Width of page on Chrome
  7. How can I increase a scrollbar’s width using CSS?
  8. Transparent scrollbar with css
  9. with fixed and scrollable [duplicate]
  10. How to get horizontal scroll bar in select box in IE?
  11. How can I create equal width/height boxes that fit the screen width? [duplicate]
  12. Scrollbar without fixed height/Dynamic height with scrollbar
  13. HTML canvas with scrollbar
  14. Bad: [html] in html code i can’t make two form input in one row [closed]
  15. How to center an element horizontally and vertically
  16. Make container shrink-to-fit child elements as they wrap
  17. How to overlay one div over another div
  18. Element will not stay centered, especially when re-sizing screen
  19. Position an element relative to its container
  20. curved div with transparent top
  21. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  22. Can a span be closed using ?
  23. How to align flexbox columns left and right?
  24. Stop CSS transition from firing on page load
  25. Inline Form nested within Horizontal Form in Bootstrap 3
  26. How can I resize an image to a percentage of itself with CSS?
  27. Responsive CSS Circles
  28. Load a low-res background image first, then a high-res one
  29. Can I use an image from my local file system as background in HTML? [duplicate]
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment