# Property Description

The -webkit-border-radius shorthand property sets the rounding of the corners of the element.

This property can accept from one to four values.

    -webkit-border-radius:
      [top-left][top-right]
      [bottom-right][bottom-left]

If all four values are provided, the radius applied to the corners are as specified.

    -webkit-border-radius:
      [top-left]
      [top-right/bottom-left]
      [bottom-right]

If three values are provided, the second value applies to top-right and bottom-left.

    -webkit-border-radius:
      [top-left/bottom-right]
      [top-right/bottom-left]

If two values are provided, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.

    -webkit-border-radius:
      [top-left/top-right/
      bottom-right/bottom-left]

If one value is provided, the radius applies to all 4 corners.

# Property Values

Value | Description
--- | ---
length | Specifies the length of the corner radius
percentage | The radius is the specified percentage of the width of the object
inherit1 | Specifies that the value of the property should be inherited from the parent element

# Examples

The following example shows the basic use of this property:

    <pre style="
      border:solid 1px black;
      -webkit-border-radius:2em;
      -webkit-border-radius:2em;
      border-radius:2em;">
    border:solid 1px black;

    -webkit-border-radius:2em;
    -webkit-border-radius:2em;
    border-radius:2em;
    </pre>

This produces the following result:

      border:solid 1px black;

      -webkit-border-radius:2em;
      -webkit-border-radius:2em;
      border-radius:2em;

# Browser Support

Firefox | IE | Chrome | Opera | Safari

# Miscellaneous Information

Inherited: | No
Defined In: | WebKit Specific
Initial Value: | 0
Applies To: | All elements, except the `table` element when border-collapse is `collapse`