Html Question posted in
Some basic documentation can be found here.

Html – Resize div's scroll bar to fit beveled corners

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.

Scroll bar "peeking" above rounded corner.

I’m hoping it’s a simple resize thing but I don’t know how easy that is. Can I do it without javascript?

Tags:

2

Answers


  1. 0

    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));
 }
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search