Radius

An additional border property that can be defined is “border radius” (border-radius: ). This changes the corners of a border and defines the amount of curve.

This property can be set with:

• Pixels - Determines the number of pixels horizontally and vertically to curve. This results in a box with equally curved corners.
• Percentages - Determines the percent of each corner’s horizontal and vertical curve. This results in boxes which start to resemble ovals.

This property can also have each corner set all at once by supplying either four values, or four values representing the horizontal corner curve amounts. A forward slash followed by four more values represents the vertical corner curve amounts.