{"id":21006,"date":"2013-04-05T15:53:15","date_gmt":"2013-04-05T22:53:15","guid":{"rendered":"http:\/\/css-tricks.com\/?p=21006"},"modified":"2016-03-04T16:58:32","modified_gmt":"2016-03-04T23:58:32","slug":"body-border-rounded-inside","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/body-border-rounded-inside\/","title":{"rendered":"Body Border, Rounded Inside"},"content":{"rendered":"
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.<\/a> We’ve covered body borders<\/a> before, but this was slightly different. <\/p>\n <\/p>\n 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:<\/p>\n But if that extra element just-for-design-reasons bothers us, we actually could pull this off using <\/code>Check out this Pen!<\/a><\/pre>\n
border-image<\/code> on the
<body><\/code> element. Remember border-image is just “nine slice” scaling essentially. Four fixed size corners, four repeating-on-one-axis edges, and a stretchy middle.<\/p>\n