Rounded corners without images

[neta]

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS. Let's start.

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div:

Code:

<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 here's it the basic CSS:

Code:

.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}

[simongagula]

thats a really cool code can u help me make one:

[MadKad]

Originally Posted by simongagula

thats a really cool code can u help me make one:

Hi what is it you want to fully make?

[roogy30]

nice code man

[moonight]

thanks for sharing the code, it will comes in handy, thanks