I use div tags to define areas within my web pages. I set all the obvious things like background, size, padding, etc. But it is all very square.
How can I use
If by "only CSS" you mean "without JavaScript" then you can surely add background images with round corners to your elements. You may need extra markup in this case depending on how much flexibility you need.
Considering that you cannot use multiple background images yet, I think using a single image is the best only CSS option.
If you can use JavaScript, then you may want to check out Nifty Corners Cube. I mention this because it works even on top of images and supports transparency.
Ask google about "css rounded corners no images" and you'll find many, many examples of how to do it.
Personally, I like the methods based on manipulating margins to draw the curve line-by-line, despite the amount of noise they produce in the page source, because they're the most flexible and can draw any shape of edge. If you're only interested in actual rounded corners (i.e., using a 90-degree circular arc), there's a much more compact solution based on some trickery with a carefully-positioned bullet.
There's a tutorial in http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ that explains how to set rounded borders in images. Peharps it migth be useful to you since the image is set as the background of a div. Although you will need to use other images and a javascript. The javascript code may be reduced if you use JQuery. o/
-moz-border-radius will get you rounded corners in all versions of Firefox. More helpful info at the Sitepoint CSS Reference.
border-radius will get you rounded corners in Safari 3. More info on border-radius at the CSS 3 Spec.
Here is a simple HTML document to demo how to achieve it through only CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ffffd; margin:0 5px;}
.b2f {height:1px; background:#ffffd; margin:0 3px;}
.b3f {height:1px; background:#ffffd; margin:0 2px;}
.b4f {height:2px; background:#ffffd; margin:0 1px;}
.contentf {background: #ffffd;}
.contentf div {margin-left: 5px;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Link to Original: http://blog.yosle.com/2007/09/20/css-round-corners/
You would use the border-radius property. However, this is only supported in CSS3, which no browser implements yet. If you only need it to work in a couple browsers you could use -webkit-border-radius and -moz-border-radius which would let it work in Safari and Firefox respectively.
If you are not opposed to using images. Here's s method I came up with for making rounded borders.