I've looked at the articles on alistapart.com, etc...Read a few articles and have an idea as to how most are done...maybe it's just me being a CSS newbie (although I've been using it for years) but...they all seem awkward???
So I ask, without pointing me to articles...
Show me the CSS and HTML (preferably seperate quote tags) which you can think of for rendering a resizable, 4 corner, 3 sided rounded box. 3 sided because the top doesn't have any drop shadow effect...
How do you accomplish this task...as everyone seem to have their hackish technique. Basically the CSS version of:
Code: Select all
<table>
<tr>
<td><img src="top_left_corner.png" /></td>
<td><!-- No border for top --></td>
<td><img src="top_right_corner.png" /></td>
</tr>
<tr>
<td><img src="left_border.png" /></td>
<td width="100%"><!-- content area --></td>
<td><img src="right_border.png" /></td>
</tr>
<tr>
<td><img src="bottom_left_corner.png" /></td>
<td><img src="bottom_right_shawdow.png" /></td>
<td><img src="bottom_right_corner.png" /></td>
</tr>
</table>
Cheers