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.