Description

Border-radius is a shorthand property for the four properties border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
If the value contains a slash the value before the slash sets the horizontal radius and after the slash sets the vertical radius.
Without a slash both Horizontal and vertical radii are equal.
Webkit and gecko based browsers currently support border-radius via proprietary properties as shown in the example below.

See also:

  • Border

  • Border-style

  • Border-color

  • Border-width

    • Live Example
    Play with the code in the textarea below.

    Values
    [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
    Introduced in CSS version
    3
    Applies to elements
    All
    Inherited
    Yes
    Browser Support
    BrowsersIEFirefoxSafariOperaChrome
    Versions94-webkit-10.50-webkit-
    Belongs to:

    See the full list CSS properties and browser support: CSS Properties