Body Border, Rounded Inside

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Reader Arun wrote in with a question on how to make a body border that was rounded where the edges met on the inside. Like this. We’ve covered body borders before, but this was slightly different.

It does look rather confusing at first. You can’t do bizarro inside-y rounded-ness like with CSS, that’s crazy talk. But then, if you just look at it as a normal rounded corner element sitting on top of a square element, it looks less weird. So that’s attempt #1:

Check out this Pen!

But if that extra element just-for-design-reasons bothers us, we actually could pull this off using border-image on the <body> element. Remember border-image is just “nine slice” scaling essentially. Four fixed size corners, four repeating-on-one-axis edges, and a stretchy middle.

Pretty easy:

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

Note that IE (any version) doesn’t do border-image.

Check out this Pen!

But but but scrolling

We’d need to ask how important it is that the “body border” always has visible bottom border. If it’s OK that the bottom part can scroll away when the page is longer than the viewport, that’s easy.

We just make sure the body is at least that big, but can get bigger:

* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
Check out this Pen!

If it’s not OK that the bottom border scrolls aways (it must be seen at all times) we’re going to have to use that extra element again. Only we’ll make sure that it can scroll vertically. That scrollbar might screw with the rounded-corner-ness though, unless we’re in WebKit and then we can fiddle with the look of the scrollbars to make sure it’s OK.

body {
  background: #5bb0ff;
}

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
}

::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}
Check out this Pen!

That’s all I got.