I was looking at ways in which I could have built my websites differently today and came across the question. How can I guarantee my CSS rounded corners to be closer to 100% cross browser compatible. I came across a few sites with scripts and generators simplifying the tasks but most of them failed the browser test. I came up with a simple script that was simple and light. I'm not going to share the code. Now don't flame me yet. Instead I've made it easier for everybody. I've created the simple CSS rounded corners generator.

The result is really just… a rounded div box. Here's an example I quickly generated from the tool.

Have you opened the link yet? No? Open it up and I'll give a quick tour of it. The tool's very simple to use. All you have to do is configure four settings and it'll do the rest for you. The four settings are:

1. Class Name
2. Background Color
3. Font Color
4. Roundness

I'll just briefly touch on the class name and roundness. The remaining settings is kind of obvious. So the class name does not really need to be set UNLESS you have multiple rounded corner boxes that are different. If you're using the same boxes over and over again, that's fine but once you change style you'll have to create new classes so they don't over lap.

The current roundness settings are 1, 2, 4, 8px. These are the settings I believe looks best with most web design. Anymore will make your template look like a lot of circles.

So that's it, that's the tool I created for all of you. If you have any questions or feedback leave a line here and I'll attend to it. Cheers!

If you didn't find the link in the Article here it is again.
The Tool: CSS Rounded Corners Generator

Share It

This entry was posted on Tuesday, September 29th, 2009 at 11:13 pm and is filed under CSS, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.