[outhowz42]

I would like to apply rounded corners to all of my boxes... have a look at the www.cnn.com website. All of their white boxes have nice rounded corners. What is the best and most efficient way of doing this?

[hansk]

There are tons of ways how to apply rounded corners, I don't know which one is the best, I usually use a method with the images of corners, because of good browser compatibility. Try searching and you'll find a lot of methods and you can choose the one that suits the best for your project.

[scotnut]

A couple of the websites I manage have been designed with those rather modern and stylish rounded corners.

How I've done it is create the images of each of the 4 corners, then specify in the CSS the position of the corners. On the page itself, in the img tag, link the id in the CSS to the image.

See below for snippets from my CSS and HTML:

CSS

Code:

#tl {

position: absolute;
	top: 0px;
	left: 0px;

}
(and then repeated for top right, bottom right, bottom left)

HTML

Code:

<div id="head" align="center">
<img src="css/top_lt.png" alt="Curve" width="12" height="12" id="tl"/><img src="css/top_rt.png" alt="Curve" width="12" height="12" id="tr"/><img src="css/bot_lt.png" alt="Curve" id="bl"/><img src="css/bot_rt.png" alt="Curve" id="br"/>
  <h1 align="center">Title</h1>

Hope this helps

[outhowz42]

I would prefer to do this without using images. Any suggestions?

[Nico]

You can use CSS:
http://www.spiffycorners.com/

Or JavaScript:
http://www.curvycorners.net/

(I prefer the JavaScript method.)