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:  border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 
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     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     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     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     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     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     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     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:

border-top-left-radius: 0


border-top-right-radius: 0


border-bottom-right-radius: 0


border-bottom-left-radius: 0





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 8b7c:f320:99b9:690f:4595:cd17:293a:c069irst-letter.


Inherited
no


Percentages
refer to the corresponding dimension of the border box


Computed value
as each of the properties of the shorthand:

border-bottom-left-radius: two absolute <length>s or <percentage>s

border-bottom-right-radius: two absolute <length>s or <percentage>s

border-top-left-radius: two absolute <length>s or <percentage>s

border-top-right-radius: two absolute <length>s or <percentage>s




Animation type
as each of the properties of the shorthand:

border-top-left-radius: a length, percentage or calc();

border-top-right-radius: a length, percentage or calc();

border-bottom-right-radius: a length, percentage or calc();

border-bottom-left-radius: a length, percentage or calc();



Formal syntax
border-radius =   <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  <length-percentage> =   <length>      |  <percentage>  Examples


Live Samples
 Sample 1 : https://jsfiddle.net/Tripad/qnGKj/2/
 Sample 2 : https://jsfiddle.net/Tripad/qnGKj/3/
 Sample 3 : https://jsfiddle.net/Tripad/qnGKj/4/
 Sample 4 : https://jsfiddle.net/Tripad/qnGKj/5/
 Sample 5 : https://jsfiddle.net/Tripad/qnGKj/6/
 Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # border-radius

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

4
Chrome ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
1


12
12


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.5
Before Opera 11.60, replaced elements with border-radius do not have rounded corners.


5
Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
3


≤37
2

18

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.
4-14

11

4.2
Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
1

1.0


elliptical_borders

1
Before 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

3
Before 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

4
Before 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.5
Before Opera 11.5, the implementation of <percentage> values was buggy.

5.1
≤37
18
4
11.5
6
1.0



See also
 Border-radius-related CSS properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Aug 22, 2022, by MDN contributors


    
{'path': 'public/docs/css/border-radius.html', 'source': 'DevDocs.IO'}