Nifty corners

First one it's a simple and in some way useful choice of creating rounded corners using Nifty corners. The techniques involves no images just a few lines of HTML code. The idea belongs to Alessandro Fulciniti (we were borne in the same year ) and the main article can be found here. He presents very well how to make a container with rounded corners. It works like this: you have a container when you want to place some text; on top and on the bottom of the <div> element a few <b> elements appear and using some margin attributes for the <b> elements the effect is created. Very simple and efficient.

The result can be seen here.

The HTML code for this container is presented bellow.

<div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

and the CSS attributes for the elements are on the next lines:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

It's good to note that, because <b> is an inline element, and to be able to change the margin attribute we have to make it a block element, and this is accomplished using the CSS attribute {display:block}.

Quite impressionable I can say .

Rounded corners using images for top and bottom area

This second method is, I think, the most widespread technique for creating containers with rounded corners. The idea is to generate an image for the container's background, and split it in three pieces, one for the top area, another for the bottom area and the third one for the middle section. The height size of the last one can be as small as possible

The HTML code consists in only few lines:

<div id="container">
<p class="top">some text here</p>
<p>some content here</p>
<p>some content here</p>
<p class="bottom">some text here</p>
</div>

and the styles look like:

#container{margin:20px;background:url(middle.png) center repeat-y;width:420px}
.top{background:url(top.png) no-repeat}
.bottom{background:url(bottom.png) bottom no-repeat}
p{padding:8px 10px 5px 20px}

Following this link you can see an example of rounded corners container.

It's simple and more efficient than previous one, because in this case a border can be used, and it creates a nice visual effect. Note that, all images have less than 1Kb in size. Also the top <p> element can be replaced with a heading tag, like <h3>, so the container looks more interesting.

Rounded corners using an image for each corner

This method uses for each corner a small image representing the corner itself. It is very well presented here with a lot of comments how to create it.

Let's take a look at the HTML code:

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<!--content goes here-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

As you can see to achieve this effect this method needs eight <div> elements, which is quite consistent. This piece of code has exactly 174 chars (excluding the "content ..." text) which means that 174 bytes are "eating" the bandwidth every time the page is loaded.
The styles also are written with consistency:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

As a comparison with the previous method, this one uses five images for creating the effect. The good thing is that they are very small in size.

Until the 'border-radius' CSS3 attribute will be implemented in web browsers' engine (you can read the specifications here at paragraph 19), one of those methods presented above is good for creating containers with rounded corners.

Another method to get rounded corners is using JavaScript (ECMAScript), but this is another story .