Prevent Scrollbar from overflow - CSS

Question

Ok, so what I mean is better represented with this image-

I want that scrollbar to not appear off the container. Because of the border-radius, the scrollbar appears to go beyond the container's dimensions.

One solution that I figured out is to make the container overflow: hidden and use another scrollable div inside it, with some padding applied to the scrollable div.

.parent {
  overflow: hidden;
}
.scrollable {
  overflow: scroll;
  padding: 20px;
}

But it doesn't seem to affect the scrollbar, even if I set box-sizing: content-box.

How do I prevent this?

Answer 1

So I solved it by using margin for the scrollable container instead of padding. Don't know why I didn't think of it before :-|