Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<title>An inline-start inset keeps the bottom-left corner's radius</title>
<style>
.contain { position: relative; height: 140px }
.test {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
border: 10px solid blue;
border-radius: 20px;
overflow-x: scroll;
overflow-y: hidden;
-moz-scrollbar-inset-inline: 30px 0;
}
/* Covers the whole padding box, so only the border ring is compared and the
scrollbar itself can't contribute pixels. */
.cover {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
background: blue;
}
</style>
<div class="contain">
<div class="test"></div>
<div class="cover"></div>
</div>