This script can transform the square DIVs into nice looking DIVs with round corners.

So, more or less what you can do with the Mozilla CSS property -moz-border-radicorners.

So, more or less what you can do with the Mozilla CSS property -moz-border-radius, but something that will work in other browsers too.

This script is unique in that you only have to add a class-name (that you can pick yourself!) to your DIV, and the script will take care of the rest. No images needed!

What this script can do

  • Transform any DIV with a background color into a DIV with rounded corners in the same color
  • Partially transform any DIV with a background-image into a DIV with rounded corners. Partially, because at this moment it only works for the top of the DIV. I’m working on completing this for the bottom as well.
  • Keep all the CSS properties (width, height, padding, etc.) intact
  • Cross-browser compatible!
  • Do all this without the need of
    1. Images
    2. Additional HTML Code (apart from a class-name)
    3. Addition CSS Code

Usage

All you have to do is create a DIV and give it a certain class-name. This class-name is what you pass to the function that will create the round-corners. That’s it! No images needed! No obscure HTML structures needed! Just a classname and you’re good to go.
Download from: Homepage




Author:
admin
Time:
Monday, June 2nd, 2008 at 1:26 am
Category:
Forms - Controls
Comments:
You can leave a response, or trackback from your own site.
RSS:
You can follow any responses to this entry through the RSS 2.0 feed.
Navigation:

Leave a Reply