Tuesday, July 14, 2009

CSS : Rounded Corners without Image 2

This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.

IE is supported through use of VML. Standards-compliant browsers are, by default, ignored. If you wish it so, each call to DD_roundies.addRule can take an optional third parameter that will spit out appropriate proprietary code for browsers that are known to support the CSS border-radius property.

Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. If you need something truly cross browser, use this library only for IE (through conditional comments), and use an SVG background image for other browsers.

As of 0.0.2a, IE now supports varying border thicknesses, matching Mozilla's implementation almost pixel-for-pixel.
round
roundrect

Step 1: Insert the below into the <HEAD> section of your page:
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js">
<script>
DD_roundies.addRule('#round', '10000px', true);
DD_roundies.addRule('#roundrect', '20px 100px 15px 50px', true);
</script>

<style type="text/css">
#round {width:100px; height:100px; background:#FA0;}
#roundrect {width:250px;height:200px; border:solid white; border-width:10px 40px 3px 0; background:#617bad;}
</style>

The above references an DD_roundies_0.0.2a-min.js file. Download DD_roundies_0.0.2a-min.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.

Step 2: Finally, insert the below script where you wish to appear on your page:
<div id="round"></div>
<div id="roundrect"></div>

Taken From : http://www.dillerdesign.com/experiment/DD_roundies/

1 comment: