curvyCorners Examples

Example 1

This example uses the orignal JavaScript invocation method and will round all 4 corners of the example DIV applying a 20 pixel radius while preserving a 3 pixel white border. The DIV has fluid height and width.

Example 2

This example uses the orignal JavaScript invocation method and will round all 4 corners of the example DIV applying a 20 pixel radius while preserving the background image. The DIV has fixed height and width.

Example 3

This example uses the orignal JavaScript invocation method and will round all 4 corners of the example DIV applying a 15 pixel radius while preserving the background image and a 5 pixel black border. The DIV has fixed height and width.

Example 4

This example is the same as example 1 but uses the new CSS invocation method. The example uses native border-radius support if available in the browser, otherwise uses curvyCorners. You must enter both border-radius CSS rules as shown in the example.

Example 5 (tabs)

This shows a number of examples using the CSS invocation method, including fluid-width rounded tabs and the dynamic redrawing available as from beta 2.0.1.

Example 6

This example uses the new CSS invocation method and will round all 4 corners of the example DIV applying a 20 pixel radius while preserving left and right 3px white border and top and bottom 3px green border. The DIV has fluid height and width.