W3cubDocs

/CSS

border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

The border-radius property is specified as:

  • one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
  • followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Values

radius A light blue rectangle with a light gray border. All 4 corners are rounded. Is a <length> or a <percentage> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left A light blue rectangle with a light gray border. The 2 corners on the top right and the bottom left are rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left A light blue rectangle with a light gray border. The corner on the top left is rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right A light blue rectangle with a light gray border. The corner on the top right is rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right A light blue rectangle with a light gray border. The bottom right corner is rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left A light blue rectangle with a light gray border. The bottom left corner is rounded. Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
<length>

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

<percentage>

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

border-radius: 1em/5em;

/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Formal definition

Initial value as each of the properties of the shorthand:
Applies to all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
Inherited no
Percentages refer to the corresponding dimension of the border box
Computed value as each of the properties of the shorthand:
Animation type as each of the properties of the shorthand:

Formal syntax

Examples

Live Samples

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
4_values_for_4_corners 4 12 4 9 10.5 5 ≤37 18 4 11 4.2 1.0
border-radius
4Chrome ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
1
1212
4["Before Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.", "To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set."]
1–12
9
10.5Before Opera 11.60, replaced elements with border-radius do not have rounded corners.
5Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
3
≤372 18
4Before Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
4–14
11
4.2Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
1
1.0
elliptical_borders
1Before Chrome 4, the slash / notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px / 10px;.
12 4 9 10.5
3Before Safari 5, the slash / notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px / 10px;.
≤37 18 4 11 4.2 1.0
percentages 8 12
4Before Firefox 4, <percentage> values are implemented in a non-standard way. Both horizontal and vertical radii were relative to the width of the border box.
9
11.5Before Opera 11.5, the implementation of <percentage> values was buggy.
5.1 ≤37 18 4 11.5 5 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius