Beautiful rounded corners for your HTML boxes

If you're viewing this page in Firefox, Safari or Google Chrome you will notice that all the boxes on this page have lovely rounded corners. The rounded corners on this page are rendered by the browser using the browser's native CSS3 border-radius implementation.

If you're viewing this page in Internet Explorer or Opera you will see that all the boxes have square corners. This is because IE and Opera don't support CSS3 border-radius.

IE and Opera viewers click the button below and CurvyCorners will run, filling the gap in browser support.

Other Demos

The following demos are included with the download package.

CurvyCorners CSS Invocation

These demos use the new CSS invocation method introduced in CurvyCorners 2.0.0. In the following three examples CurvyCorners is only used if the visitor's web browser does not support native CSS3 border-radius (currently IE and Opera).

• Box with 20px radius and a 3px white border.
• Tab bar displaying tabs with 5px radius. Other examples included.
• Box with 20px radius and a 3px green border top and bottom and 3px white left and right.

CurvyCorners JavaScript API Invocation

The three demos below use the orignal method for invoking CurvyCorners by using the provided API. The API is no longer recommened as it will cause CurvyCorners to be used even if the browser can perform the rendering natively.

• Box with 20px radius and a 3px white border.
• Box with 20px radius and photo background image.
• Box with 20px radius, a 5px black border and a background image.