Bartts: Aww, that PHP thingy produces ugly codes.

Nice. Simple. I want to see 4 rounded corners with no extra markup and no javascript, dammit! CSS3, where art thou?.

> scaffolding

Ahhh. Rails.

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.

Mats: The first-child example you provided isn’t quite rght. I think you mean something like #content *:first-child

Hi!

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

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

bests, thomas

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?

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?

I thought modern browsers already support CSS3 border-radius property

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.

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.

You kept it much simpler than other sites I have seen. Thanks.

Just for anyone who may have been tracking. My issue was with the padding being to much and floating the div down.

Just had to say I love 24 ways. I’m waiting every day to the new post.

Similiar to the Nifty Corners—-> www.phpmyborder.com

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.

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.

Nice tutorial, I have used this technique on a few projects in the past.