2007-11-14, 10:30 AM
Quote:Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I'll look at the pros and cons of some common techniques and introduce a new technique that utilises both CSS and JavaScript.
I like this Bit!
Quote:Before we dive in to the CSS, let's remind ourselves of the old fashioned approach to this problem, which uses layout tables:
<table width="200" cellpadding="0" cellspacing="0">
<tr>
<td width="15"><img src="tl.gif" alt="" /></td>
<td bgcolor="#1b5151"></td>
<td width="15"><img src="tr.gif" alt="" /></td>
</tr>
<tr bgcolor="#1b5151">
<td> </td>
<td>Content goes here</td>
<td> </td>
</tr>
<tr bgcolor="#1b5151">
<td><img src="bl.gif" alt="" /></td>
<td></td>
<td><img src="br.gif" alt="" /></td>
</tr>
</table>
Quote:A few years ago this would have been an acceptable solution. Today, it's an ugly hack: that's an awful lot of redundant markup for a relatively unimportant visual decoration. In fact, the above code won't even function as intended in documents served using a strict doctype -- small gaps will appear beneath the corner images, caused by the fact that images are inline elements and, hence, leave space beneath the image for the "tails" on letters such as 'y' and 'j'. The solution, as explained by Eric Meyer in Images, Tables and Mysterious Gaps, is to add the following rule to your stylesheet:
The mind boggles!
http://www.sitepoint.com/article/rounded...javascript