Inner UL overlaps Border Radius

I have a div with a border radius of 20px. The inner UL overlaps the border radius. I would like this ul to be scrollable, so I cant just apply a border radius to the list aswell..

Any help would be开发者_运维知识库 greatly appreciated :)

---

Try putting overflow: hidden in the wrapping div to prevent the inner UL to overlap the border radius.

Then, set overflow: scroll in the inner UL to make it scrollable if there isn't enough vertical space.

I made a simple example:

<style>
#wrapper {
    background: #DDD;
    border-radius: 20px;
    overflow: hidden;
}
ul {
    background: #AAA;
    margin: 0;
    max-height: 100px;
    overflow: auto;
    padding: 0;
}
</style>
<div id="wrapper">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>
</div>

---

One way to fix this is to make the padding of the div bigger