Showing posts with label Interner Explorer rounded corner alternate. Show all posts
Showing posts with label Interner Explorer rounded corner alternate. Show all posts

Sunday, February 5, 2012

Achieving rounded corner in IE

Achieving rounded corner in Internet Explorer - Alternate way!

Yet another example of rounded corner in IE if do not want to use htc fix.

"DD_roundies.js" is easily available to download from Internet. DD_roundies is a JS library that makes rounded corner in Internet Explorer an easy deal.

Call DD_roundies.js on the page where you want rounded corner or include in your website template to be available on all the pages. Also, you can include its code in your existing custom js.

If you use first method, calling it on your page. Follow the steps:

1.  Add this in head section of your page:
          <script src="DD_roundies.js"></script>

2. Add the following in the <script> tag after the js is called:
           DD_roundies.addRule('.box_a ', '10px');
this will set the radius of 10px on all the corners of div having box_aCSS class.

         DD_roundies.addRule('.box_a', '10px 5px');
'10px 5px' will set the top-left and bottom-right corner radius to 10px, and top-right and bottom-left to 5px;

First parameter of DD_roundies.addRule takes the class name. The second parameter follow the normal CSS rule for giving border which you can give as per your requirement.

3. Add the div with box_a class in the HTML section your page:
<div class=".box_a"> Add your content here </div>

You're good to go. The rounded corners will work here in IE as well.