Basically, I have a div that is positioned absolutely and has multiple children elements. This div can be scrolled horizontally to see all its content, but the scrollbar hangs off the bottom, hiding the bottom border radius.
Here is the HTML code:
<ul>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
<li><a>List Item Here</a></li>
</ul>
Here is the CSS code:
ul {
left: 0px;
right: 0px;
position: absolute;
border-radius: 16px;
overflow-x: scroll;
background-color:black;
}
li {
display: inline-block;
color:white;
padding-top:20px;
padding-bottom:20px;
}
Is there a way to style the scrollbar with a border radius to match the parent element? Or is there a way to hide the overflow on the scrollbar?