CSS can be a lot of work to build, especially things like rounded corners, but there are wizards online that make them easy to build. And Spiffy Corners is a fun one. Just choose the foreground and background color of your boxes, and Spiffy Corners writes the HTML and CSS for you. It's like magic. The only problems I had with this wizard were that it appears to provide 3px, 5px, and 9px corners, but only 5px corners worked in my browser. There are also a lot of ads on the page, so don't get distracted. But if you need a lot of rounded corners on your pages, this could help you save time.
- Save time creating rounded corners with Spiffy Corners
- Create your own rounded corners from scratch
- See some sample rounded corners
- See previous software picks of the week
Thank you for a useful article.
Best Regards
The site certainly does… something, but the code it generates is quite unpleasant.
The classes are called “spiffy”, “spiffy1″ … “spiffy5″ (you can rename them according to your css stylesheet, but the numbers are still there), and for some reason they’re applied to… the “b” tag.
Also, only the 5px button is accessible no matter what browser you use. You can hack the url, but it doesn’t do much.
Sorry.
Hi Plaster:
All that you said is true, but:
1. you can change the class name by changing it in the form.
2. nearly every site that explains how to do rounded corners without images uses the b tag. It’s used because it’s short and so won’t take up as much space in your code. Many sites also use classes that are one letter long as well, to again minimize space.
As to your third point about the 5px being the only button working, I believe I mentioned that in my post.
Thank you
I couldn’t agree more when it comes to saving bandwidth.
Still, the whole construction seems to go against the reason css exists: to separate content from its decoration. Where a clever stylesheet (with only a few bytes worth of :before and :after gif images that get cached anyway) should satisfy the needs, a whole set of copy-paste b tags appears as a mantra that cannot be mispelt, for no other reason than decoration of text that isn’t even enclosed in them (oh the horror; the founders of w3c and the inventors of css must be rolling in their graves).
I took a peek in the page’s code, and one thing is sure: no matter what browser you use, you won’t get the 3px and 9px rounded corners
Very true. But unfortunately until we have browser support for :before and :after or whatever mechanism is finally decided upon, this is the most commonly used method. And while it has drawbacks, as you mentioned, it’s better than using images.
Thank you for sharing this very useful tool with us Jennifer, much appreciated.
Another option (which uses native support for corner-radius in FF and safari, and a css-referenced .htc behavior for IE 6 thru 8 ):
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
great article. keep up with the good work. thank you