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.

<pre class="brush: css notranslate"><code><span class="token comment">/ The syntax of the first radius allows one to four values /</span> <span class="token comment">/ Radius is set for all 4 sides /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">/ top-left-and-bottom-right | top-right-and-bottom-left /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 5%<span class="token punctuation">;</span> <span class="token comment">/ top-left | top-right-and-bottom-left | bottom-right /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px 4px 2px<span class="token punctuation">;</span> <span class="token comment">/ top-left | top-right | bottom-right | bottom-left /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 1px 0 3px 4px<span class="token punctuation">;</span> <span class="token comment">/ The syntax of the second radius allows one to four values /</span> <span class="token comment">/ (first radius values) / radius /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px / 20px<span class="token punctuation">;</span> <span class="token comment">/ (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 5% / 20px 30px<span class="token punctuation">;</span> <span class="token comment">/ (first radius values) / top-left | top-right-and-bottom-left | bottom-right /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 5px 2em / 20px 25px 30%<span class="token punctuation">;</span> <span class="token comment">/ (first radius values) / top-left | top-right | bottom-right | bottom-left /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 5% / 20px 25em 30px 35em<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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.

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: 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;  /* ... 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;  /* ... 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: 0border-top-right-radius: 0border-bottom-right-radius: 0border-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 ::first-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>sborder-bottom-right-radius: two absolute <length>s or <percentage>sborder-top-left-radius: two absolute <length>s or <percentage>sborder-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

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
where <length-percentage> = <length> | <percentage>

Examples

  <pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px;   </pre>   <pre id="example-2"> border: groove 1em red; border-radius: 2em;   </pre>   <pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em;   </pre>   <pre id="example-4"> border: none; border-radius: 40px 10px; background: gold;   </pre>   <pre id="example-5"> border: none; border-radius: 50%; background: burlywood;   </pre>   <pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px;   </pre>   <pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px;   </pre> 

pre {   margin: 20px;   padding: 20px;   width: 80%;   height: 80px; }  pre#example-1 {   border: solid 10px;   border-radius: 10px 40px 40px 10px; }  pre#example-2 {   border: groove 1em red;   border-radius: 2em; }  pre#example-3 {   background: gold;   border: ridge gold;   border-radius: 13em/3em; }  pre#example-4 {   border: none;   border-radius: 40px 10px;   background: gold; }  pre#example-5 {   border: none;   border-radius: 50%;   background: burlywood; }  pre#example-6 {   border: dotted;   border-width: 10px 4px;   border-radius: 10px 40px; }  pre#example-7 {   border: dashed;   border-width: 2px 4px;   border-radius: 40px; } 

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

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

Last modified: Jan 31, 2022, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language