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)

500 characters remaining

Cancel or