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:
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.
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%; }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;
}That’s all I got.
One addition: add
-webkit-overflow-scrolling: touch;to the.page-wrapclass to retain inertial scrolling on iOS devices.Maybe too simple, but why not just rounded corners and margin on the body? http://jsbin.com/ilaxeb/1/edit
That works great too, and since those are required elements anyway might as well use them. Remember to use box-sizing: border-box to keep the height to 100%. And use min-heights instead of height so the area can expand. And decide if you want the bottom to be visible all the time or not which which dictate if you should use the fixed position + overflow: scroll stuff or not.
my take ( just saw your entry when wanted to post mine, +Chris ) http://codepen.io/anon/pen/KohAa
http://jsbin.com/ilaxeb/11/edit
I was just coming on to make the same suggestion! Though admittedly I was going to pad the html element instead of add margin to the body, but I think I prefer margin on the body, now that you’ve mentioned it.
Definitely what I had in mind too.
Quick and dirty test: http://jsfiddle.net/GExZa/
Was definitely thinking the same thing whole time! Seems a bit overkill to force the solution onto the body tag, but hey, you never know when this trick could come in handy
Using a psuedo element so it can be used anywhere in a site here
This works, unless you want the scrollbar showing inside the border….then it gets a bit tricky and needs more CSS or another element
Firefox does support border image :)
Firefox doesn’t do border-image? Since when did that happen? I mean, I don’t really care, since it’s a pretty useless feature, but according to MDN and caniuse.com, it’s supported unprefixed since version 15.
However, from testing, you’re right, it doesn’t work. But what’s the deal with that? I don’t remember seeing anything about that….?
I had to play around with it a bit and it turns out it does support border-image, it’s just a little more picky about it. I updated the article.
Doesn’t work:
Does work:
I guess Firefox needs border-style in addition to border-width before it will do its thing.
And I think border-image is a little useful, its just a bad name. I think more people would get it and like/use it if it was something closer to:
border-image has a ways to go before its useful. It doesn’t work well with svgs, and implementation, even for regular png images, is inconsistent across browsers. Its just not worth it.
What about without border image, using drop shadow:
http://codepen.io/anon/pen/BdoHn
Wow!! very nice tip. thank you.
I try to win originality contest by using
display: table;Too bad it’s IE9+ only (also meaning latest Firefox, Chrome and Opera all work fine).
… and then noticed the not-so-obvious-feature-from-CodePen-sample that it also needs to keep the bottom border visible all the time.
So here is a fix for that.
It keeps the scrollbar where it should be. Also no additional markup.
Third and (I hope) final version:
http://codepen.io/Merri/full/ucEmg
Awful lot of CSS, but gives a very nice transparency effect for the body border. You can see body content scroll behind the border, including the rounded corners.
Very well done!
safari 5.1.7 shows square corners
Great instructions! Thank you a lot!
It’s very simple (or rather dirty) alternative. No content wrapper, bottom border always visible, scrollbar OUTSIDE the border (which may be useful if you care about non-webkit browsers).
http://codepen.io/erykpiast/pen/eDKpv
Great example of the power of CSS. Since it was introduced, I thought that this is one of the best think that ever happen to web designers and developers. Great tutorial!
Another method using a border & box-shadow
http://codepen.io/anon/pen/bnBKC
Thank you Chris for clearing my doubt and finding time to write a tutorial on the same..
Wow… nice chris…
really its having fun and learn.
Why not use a before element? http://dabblet.com/gist/5346231 This should work on the body aswell.
What about this?
http://codepen.io/anon/pen/hjwgD
Thanks.
Isn’t it easy to just use two div’s? First one would act as the container, and second as the content holder. That way you remove image completely and everything is CSS based.
Yes. That was Chris’ first example.
Yes, but he is still using the background image.
You don’t need two divs. There are enough elements in a regular page to do it all with just those elements and a few pseudo elements. I posted my “third attempt” above in the comments that does it all without images and with no additional HTML markup while also adding some cool additional features like ability to have semitransparency for the entire border including the rounded corner areas while still maintaining clickability of the content.
You can throw the code on about any page on the web and it gives the body border effect on the site, although on
* { box-sizing: border-box; }like on this site is poison to it and you need to add a fewbox-sizing: content-box;rules to make things work properly.What about taking advantage of the fact that outlines aren’t rounded and shadows are, and do something like this? http://dabblet.com/gist/5377617
There actually isn’t a need for the outline rule as what we want to do here is to wrap it around the viewport. The box-shadow would work but the downside of any single element solution is that the border should be above content, but we don’t want to block access to the content. Unfortunatenaly there is no way in CSS to force transparent background of an element to be ignored.
Here is CodePen on the issue based on your box-shadow suggestion: http://codepen.io/Merri/pen/KGqsh
The demos for this weren’t working in Firefox. So I added the rule:
html { background: transparent; }Adding that to the demos in codepen makes them work in Firefox too.