---
title: border-top-right-radius
slug: Web/CSS/border-top-right-radius
tags:
  - CSS属性
  - CSS边框
  - Layout
  - 互联网
  - 参考
  - 需要移动浏览器兼容
translation_of: Web/CSS/border-top-right-radius
---
<p>{{ CSSRef("CSS Borders") }}</p>

<h2 id="概要" style="line-height: 30px; font-size: 2.14285714285714rem;">概要</h2>

<p><code>border-top-right-radius属性设置元素的右上角</code>弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。</p>

<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6133/=border-top-right-radius.png"></div>

<p>一个背景通常以一张图片或者颜色开始，在边框处被<span style="background-color: rgba(212, 221, 228, 0.14902);">剪切</span>，更甚至就是一个圆形；<span style="background-color: rgba(212, 221, 228, 0.14902);">剪切</span>的额外定位通过一个CSS属性"background-clip"来定义。</p>

<div class="note">在<span style="font-family: consolas,monaco,andale mono,monospace;">border-top-radius-radiu属性值之后，</span>如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过<a href="https://developer.mozilla.org/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">简写属性</a>重新设置成它的初始值。</div>

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

<h2 id="语法" style="line-height: 30px; font-size: 2.14285714285714rem;">语法</h2>

<p><a class="syntaxbox-help icon-only" href="https://developer.mozilla.org/en-US/docs/docs/Web/CSS/Value_definition_syntax" lang="en">How to read CSS syntax.</a></p>

<pre class="twopartsyntaxbox" style="font-size: 14px;"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">正式语法</a>: {{csssyntax("border-top-right-radius")}}  </pre>

<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; color: rgb(77, 78, 83);"><code class="language-html" style="direction: ltr;">border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em

border-top-right-radius: inherit</code></pre>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>

<div style="font-size: 0.9em;">
<p>之上:</p>

<dl style="padding-left: 6em;">
 <dt style="float: left; width: 7.5em;"><em>radius</em></dt>
 <dd style="padding-left: 7.5em;">这是一个<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">{{cssxref("&lt;length&gt;")}}</span>或者一个<span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">{{cssxref("&lt;percentage&gt;")}}</span>，标志着圆的半径在这个拐角用作边框。</dd>
 <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
 <dd style="padding-left: 7.5em;"><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">这是一个{{cssxref("&lt;length&gt;")}}或者一个{{cssxref("&lt;percentage&gt;")}} ，标志着椭圆的水平半长轴在这个拐角被用作边框。</span></dd>
 <dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
 <dd style="padding-left: 7.5em;"><span style="font-size: 12.6000003814697px; line-height: 18.9000015258789px;">这是一个{{cssxref("&lt;length&gt;")}}或者一个{{cssxref("&lt;percentage&gt;")}}，标志着椭圆的垂直半长轴在这个拐角被用作边框。</span></dd>
</dl>
</div>

<h3 id="属性值" style="line-height: 24px; font-size: 1.71428571428571rem;">属性值</h3>

<dl>
 <dt><code>&lt;长度&gt;</code></dt>
 <dd>标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过{{cssxref("&lt;length&gt;")}}，负值是无效的。</dd>
 <dt><code>&lt;百分数&gt;</code></dt>
 <dd>标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。</dd>
</dl>

<h2 id="例子" style="line-height: 30px; font-size: 2.14285714285714rem;">例子</h2>

<table class="standard-table" style="border: 2px solid rgb(255, 255, 255);">
 <thead>
  <tr>
   <th style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">实例</th>
   <th style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">代码</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
    <div style="border: 1px solid black; border-top-right-radius: 40px; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
   </td>
   <td style="border: 2px solid rgb(255, 255, 255);">圆形的弧被用作边框
    <pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
  border-top-right-radius: 40px 40px;
}</code></pre>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
   </td>
  </tr>
  <tr>
   <td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
    <div style="border: 1px solid black; border-top-right-radius: 40px 20px; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
   </td>
   <td style="border: 2px solid rgb(255, 255, 255);">椭圆的弧被用作边框
    <pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
  border-top-right-radius: 40px 20px;
}</code></pre>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
   </td>
  </tr>
  <tr>
   <td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
    <div style="border: 1px solid black; border-top-right-radius: 40%; width: 100px; height: 100px; background-color: rgb(144, 238, 144);"> </div>
   </td>
   <td style="border: 2px solid rgb(255, 255, 255);">盒子是方形，圆形的弧被用作边框
    <pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
  border-top-right-radius: 40%;
}</code></pre>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
   </td>
  </tr>
  <tr>
   <td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
    <div style="border: 1px solid black; border-top-right-radius: 40%; width: 100px; height: 200px; background-color: rgb(144, 238, 144);"> </div>
   </td>
   <td style="border: 2px solid rgb(255, 255, 255);">盒子不是方形，椭圆的弧被用作边框
    <pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
  border-top-right-radius: 40%;
}</code></pre>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
   </td>
  </tr>
  <tr>
   <td style="padding: 1.5em; border: 2px solid rgb(255, 255, 255);">
    <div style="border: 3px double black; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250, 20, 70); background-clip: content-box;"> </div>
   </td>
   <td style="border: 2px solid rgb(255, 255, 255);">背景颜色在边框处剪切
    <pre class="language-html" style="padding: 1em 0px 1em 30px;">
<code class="language-html" style="direction: ltr;">div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}</code></pre>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>

    <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"> </div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">技术参数</h2>

<table class="standard-table" style="border: 2px solid rgb(255, 255, 255);">
 <thead>
  <tr>
   <th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">详细说明</th>
   <th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">状态</th>
   <th scope="col" style="border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228);">解释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="border: 2px solid rgb(255, 255, 255);">{{ SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius') }}</td>
   <td style="border: 2px solid rgb(255, 255, 255);">{{ Spec2('CSS3 Backgrounds') }}</td>
   <td style="border: 2px solid rgb(255, 255, 255);">Initial specification</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性" style="line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table" style="border-color: transparent; border-style: solid;">
 <tbody>
  <tr>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">特性</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Chrome</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Firefox (Gecko)</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Internet Explorer</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Opera</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Safari (WebKit)</th>
  </tr>
  <tr>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);"><span style="font-size: 12px; line-height: 18px;">Basic support</span></td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">0.2 {{ property_prefix("-webkit") }}</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">
    <p>1.0 (1.0) - 12.0 (12.0){{ property_prefix("-moz") }}<br>
     但有一个非标准的名称:<br>
     <code>-moz-border-radius-topright</code></p>
   </td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.0 (522){{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0 (2.0)</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">5.0 (532.5)</td>
  </tr>
  <tr>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">百分值</td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">1.0 (1.0) 有一个bug (see note)</td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
   <td rowspan="2" style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">5.0 (532.5)</td>
  </tr>
  <tr>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">4.0 (2.0)</td>
  </tr>
  <tr>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">椭圆拐角</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">0.2</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.5 (1.9.1)</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">9.0</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">10.5</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">3.0 (522 )</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table" style="border-color: transparent; border-style: solid;">
 <tbody>
  <tr>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">特性</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Android</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Firefox Mobile (Gecko)</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">IE Phone</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Opera Mobile</th>
   <th style="border-style: solid; border-color: rgba(212, 221, 228, 0); line-height: 16px;">Safari Mobile</th>
  </tr>
  <tr>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">基本支持</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
   <td style="border-style: solid; border-color: rgba(212, 221, 228, 0.247059);">{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="浏览器备注" style="line-height: 24px; font-size: 1.71428571428571rem;">浏览器备注</h3>

<h4 id="火狐内核（Gecko）" style="line-height: 18px; font-size: 1.28571428571429rem;">火狐内核（Gecko）</h4>

<ul>
 <li>前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 <code>-moz-border-radius-topright</code>, 相对最终属性当最终的名称被敲定之前火狐才算完成。</li>
 <li>在火狐4之前，这个 {{cssxref("&lt;percentage&gt;")}} 是相对盒子宽度，甚至是当指定半径作为一个高). 这被应用到 当<code>-moz-border-radius-topright</code>是单个值的时候，它总是画一个圆弧，而不是一个椭圆。</li>
 <li>Gecko不可能正确地以点和虚线展示在圆角，它展示它们是以实线({{ bug("382721") }}).</li>
</ul>

<h2 id="参见" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="client_def_list_word_bar">参见</span></h2>

<p>边框半径相关的CSS属性：CSS速记 {{ cssxref("border-radius") }}, 其它角的属性：{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。</p>