Saturday, April 29, 2006

Nifty Corners: Rounded corners without images

Nifty Corners Cube is an elegant solution to the problem of adding rounded corners to HTML elements.

It is achieved with tiny white HTML elements stacked neatly in the corners to hide the background color. It doesn't support anti-aliasing like some controls, but they require server side processing. Anyway, anti-aliasing the corners is much less of an issue now with high-res monitors.

EDIT: Actually it does support anti-aliasing. The code finds the background colour of the rounded element and the background colour of the parent element and interpolates between them. Very slick DHTML / JScript. It did get a bit confused when I used the colour "White" rather than "#FFFFFF", but this probably a case of RTFM.

1 comment:

Simon Chapman said...

Have you seen the rounded corner control that is part of Atlas: Rounded Corners?