CSS border-radius Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The border-radius property shorthand sets all four border-*-radius properties. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Need some help with the border-radius property? If yes, then check out our online Border Radius Generator to see the border-radius property being used.
Initial value
See individual properties
Applies to
All elements
Inherited
No
Computed value
See individual properties
Animatable
Yes
JavaScript syntax
object.style.borderRadius

Interactive Demo

Demo of the border radius property.

Syntax

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Values

  • <length>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
  • <percentage>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.

Example

<div class="border">This is an example of the border-radius property using a red solid border 2px in width and a 10px radius for top-left, 5px for top-right, 15px for bottom-right and 20px for bottom-left.</div>
.border {
   border: 2px solid red;
   border-radius: 10px 5px 15px 20px;
   margin: 20px;
   padding: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-radius property.

Desktop
Edge Chrome Firefox Opera Safari
124410.55
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184114.2137

Last updated by CSSPortal on: 1st January 2024