Nicole Henningsen's Blog
Posted At : October 26, 2007 12:14 PM
| Posted By : Nicole Henningsen
CSS Curved Corners
Here is an example of how to create curved corners in CSS (Tested On IE & Firefox). 
The HTML
Find out More...
I was looking for a way to create curved corners using CSS instead of an image and came up with this. This example was based off of code found on CSS play.
The CSS
<style type="text/css">
.curveBox {position:relative; width:250px; background:#3399FF; color:#ffffff; margin:5em auto;}
#cv1, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#3399FF; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#cv1 {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curveBox em b {position:absolute; font-size:150px; font-family:arial; color:#3399FF; line-height:40px; font-weight:normal;}
#cv1 b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curveBox p {position:relative; z-index:100; padding:5px 10px;}
</style>
.curveBox {position:relative; width:250px; background:#3399FF; color:#ffffff; margin:5em auto;}
#cv1, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#3399FF; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#cv1 {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curveBox em b {position:absolute; font-size:150px; font-family:arial; color:#3399FF; line-height:40px; font-weight:normal;}
#cv1 b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curveBox p {position:relative; z-index:100; padding:5px 10px;}
</style>
The HTML
<div class="curveBox">
<em id="cv1"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<p>CSS to create curved corners. This has been tested on IE, and firefox
<br>
<br>
<br>
<div align="center"><img src="images/corner.jpg" /></div>
</p>
</div>
Example <em id="cv1"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<p>CSS to create curved corners. This has been tested on IE, and firefox
<br>
<br>
<br>
<div align="center"><img src="images/corner.jpg" /></div>
</p>
</div>
Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.
Too goood css thx
I found this while Googleing for curved corners without images. I've noticed that the character you use for the curve doesn't validate with any of the standard charsets. I used • (0149) and with a couple of slight adjustments to spacing it looks very similar.
Cheers