Clip scrollbar inside rounded div corners CSS [duplicate]

Question

I'm trying to clip a scrollbar inside a div so that it does not spill out over the rounded corners. Please see the code below for the demonstration of the issue.

Is it possible for the scrollbar to stay in the same position, but for the excess to be 'cut' off by the rounded corners as if it was contained within the div borders and not placed over them?

div {
  margin: 20px;
  width: 100px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}

p {
  float: left;
  width: 100%;
  padding: 10px;
}

<div>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

Answer 1

You need to wrap your content like this

.main {
  overflow: hidden;
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}
.test {
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  float: left;
  width: 100%;
  padding: 10px;
}

<div class="main">
  <div class="test">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
  </div>
</div>

Answer 2

There are multple ways but the easiest and better way is to wrap your scroll div and apply style. It will slove your problem.

div.wrapper {
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
  padding: 1.2rem 0.05rem  1.2rem 0
}

div.scroll{
 overflow-x: hidden;
 overflow-y: scroll;
  height: 200px;

}

p {
  width: 100%;
  padding: 0 10px 10px;
  margin: 0;
}

/* width */
div.scroll::-webkit-scrollbar {
  width: 15px;

}

/* Track */
div.scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 30px;
}
 
/* Handle */
div.scroll::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 30px;
  
}

/* Handle on hover */
div.scroll::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

<div class='wrapper'>
  <div class=scroll>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  </div>
</div>