To round the corners on borders use

border-radius: *length*

The length is in pixels px. The larger the number the rounder the corner.

More then one value can be entered in radius

- one number results in all four corners having the same curve.
- two number result in top-left & bottom-right being the first value and top-right & bottom-left being the second value.
- three numbers result in top-left first value, top-right & bottom-left second value and bottom-right third value.
- four numbers result in top-left first value, top-right second value, bottom-right third value and bottom-left fourth value.

If one wants to change top and bottom of a curve to different values the following commands would be used.

- border-top-left-radius:
*horizontal vertical*(first value applied to the horizontal portion of the curve second value applied to the vertical portion of the curve. - border-top-right-radius:
*horizontal vertical* - border-bottom-right-radius:
*horizontal vertical* - border-bottom-left-radius:
*horizontal vertical*

If you want all four corners to have the same varied horizontal slope and the same varied vertical slope (but horizontal is different from vertical) use the following command.

border-radius: *horizontal/vertical *

The slash mark / tells the browser to apply the first value to all widths and the second value to all heights on the border.

## Comments (0)