How to make a body border that was rounded inside
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:
HTML
<div class="page-wrap"><h1>Rounded inside body border</h1></div>
CSS
body {background: #5bb0ff;}.page-wrap {position: fixed;top: 10px;right: 10px;left: 10px;bottom: 10px;background: white;border-radius: 10px;padding: 20px;text-align: center;}
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.
