The Best, Most Awesome Rounded Corners Generator Ever
Uses 1 nice anti-aliased image, and the most simple HTML structure possible. Anything that uses less code is a big hack. Tested in ie, firefox, netscape, opera, - please inform if it breaks in other browsers.
The Attributes
The Results
Final Steps
- Download & Save the image to the desired location
- Rename the image to something nicer
- Update the path to your renamed image in the CSS provided below
- Put
class="round rounded"on any divs that you would like to magically become rounded. - Paste the CSS somewhere on your page (Preferrably in the head)
- Paste the JavaScript code somewhere on your page (Preferrably in the head)
Save and rename the image to whatever you want, then replace it in the "Unique CSS". Yes, there is only 1 image.
The Code
The HTML with some simple content inside.
HTML
Paste this CSS on your page for this specific rounded corner generation. Make sure you have named the class differently than any other rounded boxes on your page.
Unique CSS
Paste this CSS on your page only once. All rounded boxes on your page share this CSS.
Shared CSS
This script converts any existing "unrounded" divs on the page into rounded boxes.
If your page takes a long time to load, you can manually call <script>makeRound()</script> right after
your rounded divs to avoid any flickering. You can also remove the window.onload line and put the manual
script tag at the end of your page to speed things up.