S3 Corners – CSS Rounded Corners

Well S³ Corners stands for Short, Simple and Sweet Corners…

I’m always on the lookout for the way to attain CSS based rounded corners and the one that I liked the most is this . But then again I never liked IE6 hacks and also this particular one has issues if you use an image with transparent background, and so in my quest to find something that suits me the best I’ve devised my own little technique which is below.

Its really short simple and sweet and hence the S³

Here is the CSS code .s3 {width:320px; /* should be the same as the image width */ font-family:Georgia; }
.s3_head { background:url(roundedCornersBg.jpg) no-repeat center top; height:45px; line-height:45px; text-align:center; }
.s3_body { padding:5px 5px 20px 10px; background:url(roundedCornersBg.jpg) no-repeat center bottom; }

and there is the HTML markup
<div class="s3">
<div class="s3_head">
<h3>S<sup>3 </sup>Heading</h3>
</div>
<div class="s3_body">Here is the content that goes into the rounded box . . . and the story continues...
</div>
</div>

Hope you enjoy it ….

Oh two things to keep in mind,

1. This will scale only vertically down.. but thats what we usually need in most cases.
2. The image height should always be more than the div height.