border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

尝试一下

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 简写为一个属性。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。

当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

radius 可以是 <length> 或者 <percentage>，表示边框四角的圆角半径。只在单值语法中使用。 top-left-and-bottom-right 可以是 <length> 或者 <percentage>，表示边框左上角和右下角的圆角半径。只在双值语法中使用。 top-right-and-bottom-left 可以是 <length> 或者 <percentage>，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 top-left 可以是 <length> 或者 <percentage>，表示边框左上角的圆角半径。只在三值或四值语法中使用。 top-right 可以是 <length> 或者 <percentage>，表示边框右上角的圆角半径。只在四值语法中使用。 bottom-right 可以是 <length> 或者 <percentage>，表示边框右下角的圆角半径。只在三值或四值语法中使用。 bottom-left 可以是 <length> 或者 <percentage>，表示边框左下角的圆角半径。只在四值语法中使用。 inherit 表示四个值都从父元素计算值继承。

<length>: <length> 定义圆形半径或椭圆的半长轴，半短轴。负值无效。
<percentage>: 使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

例如：

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;

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;

形式定义

初始值	该简写所对应的每个属性： `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
适用元素	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`.
是否是继承属性	否
Percentages	refer to the corresponding dimension of the border box
计算值	该简写所对应的每个属性： `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s
动画类型	该简写所对应的每个属性： `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();

形式语法

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

示例

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

在线示例

示例 1：https://jsfiddle.net/Tripad/qnGKj/2/
示例 2：https://jsfiddle.net/Tripad/qnGKj/3/
示例 3：https://jsfiddle.net/Tripad/qnGKj/4/
示例 4：https://jsfiddle.net/Tripad/qnGKj/5/
示例 5：https://jsfiddle.net/Tripad/qnGKj/6/

规范

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

浏览器兼容性

参见

与 border-radius 相关的 CSS 属性：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