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>

{{Compat("css.properties.border-radius")}}

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