border-radius

  • Revision slug: CSS/border-radius
  • Revision title: border-radius
  • Revision id: 307693
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

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

This property is a shorthand to set the four properties {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} and {{ Cssxref("border-bottom-left-radius") }}.

As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.
  • {{ Xref_cssinitial() }} 0
  • Applies to all elements, except the {{ HTMLElement("table") }} element when {{ cssxref("border-collapse") }} is collapse
  • {{ Xref_cssinherited() }}no
  • {{ xref_csspercentage() }}yes, refer to the corresponding size of the border box
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified by individual properties
  • Animatable as specified by individual properties

Syntax

Formal grammar: [ <length> | <percentage> ]{1,4}  [ / [ <length> | <percentage> ]{1,4}] ? 
                \------------------------------/      \-------------------------------/
                           First radii                     Second radii (optional)
The syntax of the first radius allows one to four values:
border-radius: radius             
border-radius: top-left-and-bottom-right top-right-and-bottom-left 
border-radius: top-left top-right-and-bottom-left bottom-right 
border-radius: top-left top-right bottom-right bottom-left 

The syntax of the second radius also allows one to four values
border-radius: (first radius values) / radius             
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
border-radius: (first radius values) / top-left top-right bottom-right bottom-left 

border-radius: inherit

Values

radius all-corner.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 top-left-bottom-right.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 top-right-bottom-left.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 top-left.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 top-right.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 bottom-rigth.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 bottom-left.png Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.
inherit   Is a keyword indicating that all four values are inherited from their parent's element calculated value.

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 {{ xref_csslength() }} 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 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;

Examples

  border: solid 10px;
  /* the border will curve into a 'D' */  
  border-radius: 10px 40px 40px 10px;
  border: groove 1em red;  
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em; 
  border: none;
  border-radius: 40px 10px;  
  border: none;
  border-radius: 50%; 

Notes

  • Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.
  • border-radius does not apply to table elements when {{ Cssxref("border-collapse") }} is collapse.
  • Old versions of WebKit handle multiple values differently, see below.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }} {{ Spec2('CSS3 Backgrounds') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("2.0") }}
{{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}
4.0
0.2{{ property_prefix("-webkit") }}
9.0 10.5 5.0
3.0{{ property_prefix("-webkit") }}
Elliptical borders {{ CompatGeckoDesktop("1.9.1") }} yes yes yes yes, but see below
4 values for 4 corners yes 4.0 yes yes 5.0
Percentages yes
was {{ non-standard_inline() }} (see below)
yes yes 11.5 5.1
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support 3.2{{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} 2.1{{ property_prefix("-webkit") }}
Elliptical borders {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}
4 values for 4 corners {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}
Percentages {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }}

<percentage> values

  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
  • are buggy in Opera prior to 11.50
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

Gecko notes

In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

  • changes the handling of {{ xref_csspercentage() }} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
  • makes rounded corners clip content and images (if {{ cssxref("overflow") }}: visible is not set)
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.

WebKit notes

Older Safari and Chrome versions (prior to WebKit 532.5)

  • support only one value for all 4 corners. For different radii the long form properties must be used
  • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners
    /* this is equivalent: */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Opera notes

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

See also

  • Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}

{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>border-radius</code> CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.</p>
<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="internal default" src="/files/3638/border-radius-sh.png" style="width: 549px; height: 164px;" /></p>
<p>The radius applies to the whole {{ Cssxref("background") }}, even if the element has no border; the exact position of the clipping is defined by the {{ Cssxref("background-clip") }} property.</p>
<p>This property is a <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">shorthand</a> to set the four properties {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} and {{ Cssxref("border-bottom-left-radius") }}.</p>
<div class="note">
  As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div>
<ul class="cssprop" style="display:table;padding: 0.4em;border-left:0.15em solid;background-color:#eeeeff">
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinitial() }}</dfn> <code>0</code></li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Applies to</dfn> all elements, except the {{ HTMLElement("table") }} element when {{ cssxref("border-collapse") }} is <code>collapse</code></li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinherited() }}</dfn>no</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ xref_csspercentage() }}</dfn>yes, refer to the corresponding size of the border box</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Media</dfn> {{ Xref_cssvisual() }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_csscomputed() }}</dfn> as specified by individual properties</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Animatable</dfn> as specified by individual properties</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal grammar: [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4}&nbsp; [ / [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ]{1,4}] ? 
                \------------------------------/      \-------------------------------/
                           First radii                     Second radii (optional)
</pre>
<pre>
<strong>The syntax of the first radius allows one to four values:</strong>
border-radius: <em>radius</em>             
border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> 
border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> 
border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> 

<strong>The syntax of the second radius also allows one to four values</strong>
border-radius: (first radius values) / <em>radius</em>             
border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> 
border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> 
border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> 

border-radius: inherit
</pre>
<h3 id="Values">Values</h3>
<table>
  <tbody>
    <tr>
      <td style="vertical-align:top"><em>radius</em></td>
      <td><img alt="all-corner.png" class="internal default" src="/@api/deki/files/6138/=all-corner.png" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>top-left-and-bottom-right</em></td>
      <td><img alt="top-left-bottom-right.png" class="internal default" src="/@api/deki/files/6141/=top-left-bottom-right.png" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>top-right-and-bottom-left</em></td>
      <td><img alt="top-right-bottom-left.png" class="internal default" src="/@api/deki/files/6143/=top-right-bottom-left.png" style="" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>top-left</em></td>
      <td><img alt="top-left.png" class="internal default" src="/@api/deki/files/6142/=top-left.png" style="" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>top-right</em></td>
      <td style="margin-left:2px;"><img alt="top-right.png" class="internal default" src="/@api/deki/files/6144/=top-right.png" style="" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>bottom-right</em></td>
      <td style="margin-left:2px;"><img alt="bottom-rigth.png" class="internal default" src="/@api/deki/files/6140/=bottom-rigth.png" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><em>bottom-left</em></td>
      <td><img alt="bottom-left.png" class="internal default" src="/@api/deki/files/6139/=bottom-left.png" /></td>
      <td style="vertical-align:top">Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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.</td>
    </tr>
    <tr>
      <td style="vertical-align:top"><code>inherit</code></td>
      <td>&nbsp;</td>
      <td style="vertical-align:top">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td>
    </tr>
  </tbody>
</table>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    &lt;length&gt;</dt>
  <dd>
    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 {{ xref_csslength() }} data types. Negative values are invalid.</dd>
  <dt>
    &lt;percentage&gt;</dt>
  <dd>
    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 axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd>
</dl>
<p>For example:</p>
<pre class="brush: css">
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;
</pre>
<pre class="brush: css">
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;
</pre>
<h2 id="Examples">Examples</h2>
<pre style="display:inline-block; margin:10px; border:solid 10px; border-radius: 10px 40px 40px 10px;">
  border: solid 10px;
  /* the border will curve into a 'D' */  
  border-radius: 10px 40px 40px 10px;
</pre>
<pre style="display:inline-block; margin:10px; border: groove 1em red; border-radius:2em;">
  border: groove 1em red;  
  border-radius: 2em;
</pre>
<pre style="display:inline-block; margin:10px; background:gold; border:ridge gold; border-radius:13em/3em;">
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em; 
</pre>
<pre style="display:inline-block; margin:10px; background:gold; border:none; border-radius: 40px 10px;">
  border: none;
  border-radius: 40px 10px;  
</pre>
<pre style="display:inline-block; margin:10px; background:black; color:white; border:none; border-radius:50%">
  border: none;
  border-radius: 50%; 
</pre>
<h2 id="Notes">Notes</h2>
<ul>
  <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li>
  <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li>
  <li>Old versions of WebKit handle multiple values differently, see below.</li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td>
        <td>4.0<br />
          0.2{{ property_prefix("-webkit") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.0<br />
          3.0{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Elliptical borders</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes, but see below</td>
      </tr>
      <tr>
        <td>4 values for 4 corners</td>
        <td>yes</td>
        <td>4.0</td>
        <td>yes</td>
        <td>yes</td>
        <td>5.0</td>
      </tr>
      <tr>
        <td>Percentages</td>
        <td>yes<br />
          was {{ non-standard_inline() }} (see below)</td>
        <td>yes</td>
        <td>yes</td>
        <td>11.5</td>
        <td>5.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Android Browser</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>3.2{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>2.1{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Elliptical borders</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>4 values for 4 corners</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Percentages</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="&lt;percentage&gt;_values"><code>&lt;percentage&gt;</code> values</h3>
<ul>
  <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li>
  <li>are buggy in Opera prior to 11.50</li>
  <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li>
  <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li>
</ul>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p>
<ul>
  <li>changes the handling of {{ xref_csspercentage() }} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li>
  <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li>
</ul>
<div class="note">
  <strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div>
<h3 id="WebKit_notes">WebKit notes</h3>
<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p>
<ul>
  <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li>
  <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners
    <pre>
/* this is equivalent: */

-webkit-border-radius: 40px 10px;
        border-radius: 40px/10px;
</pre>
  </li>
</ul>
<h3 id="Opera_notes">Opera notes</h3>
<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p>
Revert to this revision