Download Rounded corners script

Demo

Bookmark and Share

Download script

You can download the entire script from this Zip file

Files included in the package:

  • rounded-corners.html = Main demo HTML file
  • js/rounded-corners.js = Main JS file for the script
  • doc/* = Documentation of methods

Configuration

Include files

First, you need to include the js file rounded-corners.html with a script tag

Specify which elements you want to apply rounded corners to

This is done by the addTarget method. Example: Put this at the bottom of your HTML file:

<script type="text/javascript">
rC = new DHTMLgoodies_roundedCorners();
rC.addTarget('leftColumn',25,25,'#317082','#FFFFFF',5,300, 'top_left,bottom_left,bottom_right');
rC.addTarget('contentColumn',25,25,'#7190E0','#FFFFFF',5,300, 'top_left,bottom_left,bottom_right');
rC.addTarget('footer',25,25,'#CCCCFF','#FFFFFF',5,false, 'bottom_left,bottom_right');
rc.init();
</script>

This will add rounded corners to element with ids leftColumn, contentColumn and footer.

The arguments to the addTarget method are:

  • ID of element
  • X radius of rounded corner
  • Y radius of rounded corner
  • Background color of element you are applying rounded corners to
  • Background color of element behind
  • Padding of content.
  • Height of content.
  • Where to apply corners

For more help, look at the demo file or see the Complete class documentation

Comments

Gilberto
this work in IE9?
Gilberto at 03:22AM, 2011/05/27.
aftab
Hey! its great bcoz it works on all IE browsers except IE5
aftab at 06:30AM, 2012/05/16.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com