A quick and easy recipe for turning those single-pixel borders that the kids love so much into into something a little less right-angled.
Here’s the principle: We have a box with a one-pixel wide border around it. Inside that box is another box that has a little rounded-corner background image sitting snugly in one of its corners. The inner-box is then nudged out a bit so that it’s actually sitting on top of the outer box. If it’s all done properly, that little background image can mask the hard right angle of the default border of the outer-box, giving the impression that it actually has a rounded corner.
Take An Image, Finely Chopped
Add A Sprinkle of Markup
<div id="content">
<p>Lorem ipsum etc. etc. etc.</p>
</div>Throw In A Dollop of CSS
#content {
border: 1px solid #c03;
}
#content p {
background: url(corner.gif) top left no-repeat;
position: relative;
left: -1px;
top: -1px;
padding: 1em;
margin: 0;
}Bubblin’ Hot
- The content div has a one-pixel wide red border around it.
- The paragraph is given a single instance of the background image, created to look like a one-pixel wide arc.
- The paragraph is shunted outside of the box – back one pixel and up one pixel – so that it is sitting over the div’s border. The white area of the image covers up that part of the border’s corner, and the arc meets up with the top and left border.
- Because, in this example, we’re applying a background image to a paragraph, its top margin needs to be zeroed so that it starts at the top of its container.
Et voilà. Bon appétit.
Extra Toppings
- If you want to apply a curve to each one of the corners and you run out of meaningful markup to hook the background images on to, throw some spans or divs in the mix (there’s nothing wrong with this if that’s the effect you truly want – they don’t hurt anybody) or use some nifty DOM Scripting to put the scaffolding in for you.
- Note that if you’ve got more than one of these relative corners, you will need to compensate for the starting position of each box which is nested in an already nudged parent.
- You’re not limited to one pixel wide, rounded corners – the same principles apply to thicker borders, or corners with different shapes.
About the author
Patrick Griffiths is a silverback member of London-based web woop Vivabit. He has been known to dabble in book writing and conference organising and also has a penchant for films, evolution and walking his pet website, HTML Dog.
Comments
14/12/2005
Nice tutorial, I have used this technique on a few projects in the past.
14/12/2005
Nice. Simple. I want to see 4 rounded corners with no extra markup and no javascript, dammit! CSS3, where art thou?.
> scaffolding
Ahhh. Rails.
14/12/2005
Couldn’t we make it more generic and modern-browser-friendly by using
#content:first-childinstead?I haven’t tried it but it seems a bit easier.
Or
.one:first-childin the thick-border-example, which I really liked!Nice article, seemed so simple when you explained it.
14/12/2005
Mats: The first-child example you provided isn’t quite rght. I think you mean something like
#content *:first-child14/12/2005
Hi!
A while ago i found that site which makes round corners without images!
http://pro.html.it/esempio/nifty/
bests, thomas
14/12/2005
Yea you’re right, my bad.
I always have a problem remembering what
first-childrefers to, if it’s the first occurence of#contentor if it’s the first element inside of#content.Anyway, wouldn’t it be more generic if we used
first-childinstead?14/12/2005
Great writeup!
I have one minor problem. I’m using this in a sidebar on the right and it displays perfectly on the top with Firefox.
However, in IE it drops to the bottom of the page. I think this has to do with the position attribute. Is there something I can do to make this go to the top?
14/12/2005
I thought modern browsers already support CSS3
border-radiusproperty14/12/2005
This article is a good primer on the basic techniques used to make rounded corners with CSS, but as alluded to in the article and in some of the previous comments, there is still room for a lot of improvements.
An ideal solution would be able to style all four corners of the box without requiring extra div or span tags. (Remember that we should be trying to maintain lean, semantic markup here…) Also, it would be nice to be able to accomplish this without JavaScript, but until the major browsers support the CSS3 border-radius property, JavaScript is probably going to be required. (Firefox/Mozilla browsers already support the roughly equivalent -moz-border-radius property.)
In the meantime, if you’re looking for a much better (and more complete) solution than this article provides, check out the following resources:
Nifty Corners
Transparent custom corners and borders
MochiKit Rounded Corners
These should be enough to get you going. If I’ve left out any other good ones, let me know.
14/12/2005
They’re not much better and more complete though, they’re completely different. This technique is basic, and really specific – to x-pixel wide borders – rather than rounded corners in general.
To address some of the previous points – much of the
span/divscaffolding is necessary because of the current state of browser (as in IE) capabilities. Ideally we could usefirst-child, or multiple background images in the same box, but it just aint practical at the moment.14/12/2005
You kept it much simpler than other sites I have seen. Thanks.
14/12/2005
Just for anyone who may have been tracking. My issue was with the padding being to much and floating the div down.
15/12/2005
Just had to say I love 24 ways. I’m waiting every day to the new post.
15/12/2005
Similiar to the Nifty Corners—-> www.phpmyborder.com
15/12/2005
One minor quibble: my default background color is off-white, so the white background of the corner .gif is a little jarring. Adding a matching background color to the base #content would probably do the trick, though. Nicely done.
17/12/2005
Bartts: Aww, that PHP thingy produces ugly codes.
22/12/2005
In case anyone’s interested, I posted a pretty comprehensive roundup (ho ho) of CSS rounded corner techniques on my web site.
It includes both CSS-only and JavaScript-based techniques.
Commenting is closed for this article.