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:
<h1>Rounded inside body border</h1>
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.