title: Clip scrollbar inside rounded div corners CSS
body: <p>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.</p>
  
  <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;Item 1&lt;/p&gt;
    &lt;p&gt;Item 2&lt;/p&gt;
    &lt;p&gt;Item 3&lt;/p&gt;
    &lt;p&gt;Item 4&lt;/p&gt;
    &lt;p&gt;Item 5&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>