Really simple. How can I offset where the top and bottom of my scroll bar lie? It currently isn’t playing nicely with the beveled corners.
Here’s what it looks like right now.
I’m hoping it’s a simple resize thing but I don’t know how easy that is. Can I do it without javascript?
2
This might solve the issue by using clip-path for the body
body{ box-sizing: border-box; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
If you separate your border element and the scrollable element, you can use padding on the border element:
.bordered { border: 2px solid black; border-radius: 2rem; padding-block: 2rem; background-color: pink; } .scrollable { max-height: 80dvh; overflow: auto; background-color: lightblue; } #content { height: 200dvh; }
<div class="bordered"> <div class="scrollable"> <div id="content"></div> </div> </div>
Click here to cancel reply.
2
Answers
This might solve the issue by using clip-path for the body
If you separate your border element and the scrollable element, you can use padding on the border element: