...

View Full Version : CSS Round corner border without images



Uzair
09-21-2006, 03:15 PM
is it possible to make a rounded corner border in CSS without using any images ??????

I saw something like this on a site: moz-border-radius:4px;
but this is not working in IE or FF.

is there any way to ... ????

jalarie
09-21-2006, 06:39 PM
I've not seen it done using absolutely NO images. It can be done using a single, transparent image used multiple times with different stated widths to make the result appear rounded:


<style type="text/css">
/*<![CDATA[*/
.RC_color {
background-color: #ffdd00;
}
/*]]>*/
</style>

<table border="0" cellspacing="0" cellpadding="0" style="margin-left:20px;">
<tr>
<td align="right" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
<td align="left" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
</td>
</tr>
<tr>
<td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
<td class="RC_color" align="left">
=============================<br />
Sample content; replace this.<br />
=============================
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
</tr>
<tr>
<td align="right" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
</td>
<td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
<td align="left" width="10">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
</td>
</tr>
</table>

ronaldb66
09-22-2006, 09:11 AM
The above, and something similar using a whole bunch of empty elements with various widths, should be regarded as very bad approaches because of the introduction of a great number of meaningless, superfluous elements; both methods are vastly inferior to the simple application of background images to creating the rounded corner effect.

_Aerospace_Eng_
09-22-2006, 09:27 AM
Uzair what you have would work in firefox, you just need a hyphen in front of it however it won't work in IE. I like Stu Nicholl's example here: http://www.cssplay.co.uk/boxes/snazzy.html
Its doesn't use that much superflous code. Maybe about 10 extra bold tags and thats about it.

ronaldb66
09-22-2006, 09:37 AM
Uck. Still 10 too many.

_Aerospace_Eng_
09-22-2006, 09:39 AM
I agree but it might be better than the table solution previously posted. Usually I just make the curves. It takes a few minutes to make rounded corners.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum