CSS and Round Corners: Build Boxes with Curves

This is an article discussion thread for discussing the SitePoint article, “CSS and Round Corners: Build Boxes with Curves

I really don’t like the way rounded corners are done in the html. Your using markup, the four divs, to define the presentation of the page, rounded corners.

It doesn’t look very semantic… 4 divs :\

There should be a CSS property that allow the user to create rounded corners, just like there’s a “-moz-border-radius” for Mozilla browsers.

Echo the comments about using markup for the presentation.

Very nice Trenton, I will consider using this in future projects.

Thank you :slight_smile:


Keeping the html code clean and light.


Hey, it is better than a table.

So how would you do it?

I agree with <b>Chris</b>; Nifty Corners is a better technique.

Pete and Chris should look at the Nifty technique in more than one browser. In IE 5.5 the results break without degrading gracefully.

On the other hand for those of us stuck supporting NS 4.x it does render into mostly legible text which Trenton’s code does not.

The bottom line is no one technique is going to work for every site in every situation. Know your users and their environment and test test test.

how do you do it with semantic html/xhtml?

Nifty Technique

Alternatively, if you’re building a site where the background color of the layer needs to be able to change dynamically and the background color of the page itself stays consistent, making the inverse of the images Trenton suggests works in this case. For example, make a white image (assuming your page background is white) where the corners come to points and are rounded on the inside. This allows you to change the background color of the layer and block out the corners to look round with the inversed white image.

Two things:

  1. This is a great article, well written and works like a charm.
  2. It’s out-dated information: Rounded corners can be achieved without all the extra div tags in your (x)HTML now, perfect example be one of the latest SitePoint blog posts: http://www.sitepoint.com/blog-post-view.php?id=243998. A bit nicer in the code, great performance, and (get this) it doesn’t even use images!

It would be nice if CSS could support making curves…

I prefer the other sitepoint blog solution using javascript to add corners to whatever item you wish.

Bloating the markup is BAD. Bad… bad bad bad… smack smack.

Stop doing it. Why do we use CSS? Because creating layout/styling within HTML is bad, inflexible etc etc.

Yes there are reasons for the badness, but im not getting into them right now.

i do like those non-image rounded corners…

if you still like the good old images check out

excellent tutorial on good looking navigation using rounded corners

Oh my! all thouse useless divs out there…
not so cool


Maybe this is the way to go: