Rounded Corners Using CSS

Rounded corners rely on the fact that computer monitors and our eyes are not that good at viewing what are effectively tiny squares (the pixels). So if you set up a series of pixels along the edges of your elements, you can line them up in such a way that they make the box they are edging appear to have rounded edges. For example, this page demonstrates how you can set up rounded corners on various div elements.
To create the rounded corners, you need an inline element that acts as the actual pixel for your corner. This could be any inline element, but I prefer either the span element or the b element. Span because it's probably the most "correct" element to use, and b because it's shorter to type and you should be using strong for your bolded text.
You also need a container element, such as a div. You could also use an unordered list as your container, or any other block-level element, but the div seems to be the easiest to understand, and you can include other block elements inside a div, which you can't inside, say, a paragraph.

CONTENTS GOES HERE

In order for your corners to show up, you need to have your container div be a different color than the background color of the page. So, the first thing your style sheet should have is a style indicating what color your rounded elements will be: .container {background:#ccc;color:#fff;margin:0 15px;}
As you can see, I also set the left and right margins a little off the edges so that they would be easier to see the rounded corners.
Each corner is written as a b element classed either rtop or rbottom. Then inside of this element are 4 more b elements, classed r1 through r4. To get the correct colors, you need to set the rtop and rbottom elements the same as the page background color. Then you set the r1 through r4 elements the same background color as the container. .rtop, .rbottom{display:block;background:#fff;} .rtop *, .rbottom *{display: block;height: 1px;overflow: hidden;background:#ccc;}
Setting the overflow to hidden ensures that the elements inside rtop and rbottom won't extend past their allotted space.
The last thing you do is set the right and left margins of the r1 through r4 elements so that they get progressively smaller and create the curve you're looking for. .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px}
The height on the r4 element helps insure that the entire section doesn't take up too much space.
Rounded corners done in this style will work on the following types of elements: floated elements absolutely positioned elements fixed width elements percentage width elements
You can't use this exact style with a fixed height or with padding on the container element. But you can solve that problem by creating a second container element that assigns your height or padding.
This technique doesn't work on IE 5.x for Windows.
There are also some problems with text-indent in Internet Explorer. .container {background:#ccc; color:#fff; margin:0 15px;} .rtop, .rbottom{display:block;background:#fff;} .rtop *, .rbottom *{display: block;height: 1px;overflow: hidden;background:#ccc;} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px;height: 2px}
See some sample rounded corners.
View the original article here