24 ways: Broader Border Corners

Broader Border Corners by Patrick Griffiths

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

Magnified corner example

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.

Your comments

§ Colin Cameron:
Nice tutorial, I have used this technique on a few projects in the past.
§ Justin Perkins:
Nice. Simple. I want to see 4 rounded corners with no extra markup and no javascript, dammit! CSS3, where art thou?.

> scaffolding

Ahhh. Rails.
§ Mats Lindblad:
Couldn’t we make it more generic and modern-browser-friendly by using #content:first-child instead?

I haven’t tried it but it seems a bit easier.

Or .one:first-child in the thick-border-example, which I really liked!

Nice article, seemed so simple when you explained it.
§ trovster:
Mats: The first-child example you provided isn’t quite rght. I think you mean something like #content *:first-child
§ Thomas Vavra:
Hi!

A while ago i found that site which makes round corners without images!

http://pro.html.it/esempio/nifty/

bests, thomas
§ Mats Lindblad:
Yea you’re right, my bad.

I always have a problem remembering what first-child refers to, if it’s the first occurence of #content or if it’s the first element inside of #content.

Anyway, wouldn’t it be more generic if we used first-child instead?
§ agentgray:
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?
§ Frank Taillandier:
I thought modern browsers already support CSS3 border-radius property
§ Richard Davies:
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.
§ Patrick Griffiths:
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 / div scaffolding is necessary because of the current state of browser (as in IE) capabilities. Ideally we could use first-child, or multiple background images in the same box, but it just aint practical at the moment.
§ ph0tik:
You kept it much simpler than other sites I have seen. Thanks.
§ agentgray:
Just for anyone who may have been tracking. My issue was with the padding being to much and floating the div down.
§ Raanan Avidor:
Just had to say I love 24 ways. I’m waiting every day to the new post.
§ Bartts:
Similiar to the Nifty Corners—-> www.phpmyborder.com
§ cowboy_k:
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.
§ draco:
Bartts: Aww, that PHP thingy produces ugly codes.
§ Christian Watson:
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.