path: root/files/zh-cn/web/css/border-radius/index.html

---
title: border-radius
slug: Web/CSS/border-radius
tags:
  - CSS
  - CSS 属性
  - CSS 边框
  - Web
  - 参考
  - 布局
translation_of: Web/CSS/border-radius
---
<p>{{ CSSRef("CSS Borders") }}</p>

<p><a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <strong><code>border-radius</code></strong> 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。</p>

<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p>

<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>



<p>该属性是一个 <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a>，是为了将这四个属性 {{Cssxref("border-top-left-radius")}}、{{Cssxref("border-top-right-radius")}}、{{Cssxref("border-bottom-right-radius")}}，和 {{Cssxref("border-bottom-left-radius")}} 简写为一个属性。</p>

<p>即使元素没有边框，圆角也可以用到 {{ Cssxref("background") }} 上面，具体效果受 {{ Cssxref("background-clip") }} 影响。</p>

<p>当 {{Cssxref("border-collapse")}} 的值为 <code>collapse</code> 时，<code>border-radius</code> 属性不会被应用到表格（</p>）元素上。<table>




















</table>


   <em>radius</em>
   <img alt="all-corner.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6138/=all-corner.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框四角的圆角半径。只在单值语法中使用。


   <em>top-left-and-bottom-right</em>
   <img alt="top-left-bottom-right.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6141/=top-left-bottom-right.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框左上角和右下角的圆角半径。只在双值语法中使用。


   <em>top-right-and-bottom-left</em>
   <img alt="top-right-bottom-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6143/=top-right-bottom-left.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。


   <em>top-left</em>
   <img alt="top-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6142/=top-left.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框左上角的圆角半径。只在三值或四值语法中使用。


   <em>top-right</em>
   <img alt="top-right.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6144/=top-right.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框右上角的圆角半径。只在四值语法中使用。


   <em>bottom-right</em>
   <img alt="bottom-rigth.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6140/=bottom-rigth.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框右下角的圆角半径。只在三值或四值语法中使用。


   <em>bottom-left</em>
   <img alt="bottom-left.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6139/=bottom-left.png">
   可以是 {{ cssxref("&lt;length&gt;") }} 或者 {{cssxref("&lt;percentage&gt;")}}，表示边框左下角的圆角半径。只在四值语法中使用。


   <code>inherit</code>

   表示四个值都从父元素计算值继承。




<dl>
 <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
 <dd>{{ cssxref("&lt;length&gt;") }} 定义圆形半径或椭圆的半长轴，半短轴。负值无效。</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
 <dd>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。</dd>
</dl>

<p>例如:</p>

<pre class="brush: css">border-radius: 1em/5em;

/* 等价于： */

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;

/* 等价于： */

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>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="示例">示例</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="在线示例">在线示例</h2>

<p>示例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></p>

<p>示例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></p>

<p>示例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></p>

<p>示例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></p>

<p>示例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></p>

<h2 id="注意">注意</h2>

<ul>
 <li>在 Gecko 中，点状和虚线状圆角边框被渲染为了实线 {{ bug("382721") }}.</li>
 <li>当表格元素的 {{ Cssxref("border-collapse") }} 为 <code>collapse</code> 时 <code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">border-radius</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"> 不会生效。</span></li>
 <li>旧版本 WebKit 对于多重值有不同的处理方式，见下。</li>
</ul>

<h2 id="规范">规范</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> </td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>


<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.properties.border-radius")}}</p>

<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>_值"><code>&lt;percentage&gt;</code> 值</h3>

<ul>
 <li>在旧版本的 Chrome 和 Safari 中不支持。(<a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li>
 <li>在 11.50 版本以前的 Opera 中实现有问题。</li>
 <li>Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴<strong>都</strong>相对于盒子模型的宽度。</li>
 <li>在旧版本的 iOS (iOS 5 之前) 和 Android 中 (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 {{cssxref("&lt;percentage&gt;")}} 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>旧版本的 Safari 和 Chrome (532.5 之前)</p>

<ul>
 <li>只支持<strong>单值</strong>设定四个角。必须使用<a href="/en/CSS/border-top-left-radius#Examples" style="text-decoration: underline;" title="en/CSS/border-top-left-radius#Examples">完整值</a>来设置不同角。 </li>
 <li>不支持斜杠 / 符号，如果指定了两个值，那么四个角都为椭圆角.
  <pre>/* 它们是等价的 */

-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="另请参阅">另请参阅</h2>

<ul>
 <li>与 border-radius 相关的 CSS 属性：{{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
</ul>