25 April 2008
The thought only just occurred to me that I'd never used the newly emerging technology for creating rounded corners in CSS – border-radius. So to rectify this, I set about experimenting with abstract uses for rounded corner rectangles. This is the result:
border-radius is only available in
Firefox and Safari , so don't bother trying Circtangles out in anything else.
There's a few tweakable options at hand for you to try out, but they all result in a rather nice looking piece of randomly generated art. To generate different random patterns you can hit the regenerate button at bottom centre.
A couple of notes about using border-radius in your CSS:
- Safari's rounded corners look so much better because they're anti-aliased.
- Safari's border-radius is also less buggy than Firefox's – Firefox (v.2) will not let you specify a border-radius that is larger than half the height of the total element height.
- Safari (true to form) has much faster redraw when changing the display properties of large numbers of objects (so Firefox will be a bit slow on this experiment).
- If you're accessing Mozilla custom CSS attributes via the DOM, you should capitalise the "M" in "Moz". So, for example: -moz-border-radius becomes MozBorderRadius.
So, with those caveats, enjoy Circtangles. I can only wait for the day when rounded corners are native to every browser out there.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout