border-radius

**border-radius** CSS 属性将元素外边框边缘的角圆角化。您可以设置单个半径以创建圆角，或者设置两个半径以创建椭圆形角。

尝试一下

半径应用于整个 background，即使元素没有边框；剪切的确切位置由 background-clip 属性定义。

当 border-collapse 为 collapse 时，border-radius 属性不应用于表格元素。

**注意：**与任何简写属性一样，单个子属性不能继承，例如 border-radius:0 0 inherit inherit，这将部分覆盖现有定义。相反，必须使用单个长写属性。

构成属性

此属性是以下 CSS 属性的简写

语法

css

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

border-radius 属性的指定方式为

一个、两个、三个或四个 <length> 或 <percentage> 值。这用于为角设置单个半径。
可选地后跟“/”和一个、两个、三个或四个 <length> 或 <percentage> 值。这用于设置额外的半径，因此您可以拥有椭圆形角。

值

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

<长度>: 表示圆形半径的大小，或椭圆的长半轴和短半轴的大小，使用长度值。负值无效。
<百分比>: 表示圆形半径的大小，或椭圆的长半轴和短半轴的大小，使用百分比值。水平轴的百分比指的是盒子的宽度；垂直轴的百分比指的是盒子的高度。负值无效。

例如

css

border-radius: 1em/5em;

/* It 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;

css

border-radius: 4px 3px 6px / 2px 4px;

/* It 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;

正式定义

初始值	作为简写中每个属性的属性 `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
应用于	所有元素；但是用户代理在 `border-collapse` 为 `collapse` 时，不需要应用于 `table` 和 `inline-table` 元素。目前内部表格元素的行为尚未定义。它也适用于 `::first-letter`。
继承	否
百分比	指的是边框盒的相应尺寸
计算值	作为简写中每个属性的属性 `border-bottom-left-radius`: 两个绝对的 `<length>` 或 `<percentage>` `border-bottom-right-radius`: 两个绝对的 `<length>` 或 `<percentage>` `border-top-left-radius`: 两个绝对的 `<length>` 或 `<percentage>` `border-top-right-radius`: 两个绝对的 `<length>` 或 `<percentage>`
动画类型	作为简写中每个属性的属性 `border-top-left-radius`: 一个长度，百分比或 calc()； `border-top-right-radius`: 一个长度，百分比或 calc()； `border-bottom-right-radius`: 一个长度，百分比或 calc()； `border-bottom-left-radius`: 一个长度，百分比或 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/

规范

规范
CSS 背景和边框模块第 3 级 # border-radius

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅

与边框半径相关的 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

半径		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框每个角的边框的半径。它仅在单值语法中使用。
左上角和右下角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框的左上角和右下角的边框的半径。它仅在双值语法中使用。
右上角和左下角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框的右上角和左下角的边框的半径。它仅在双值和三值语法中使用。
左上角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框左上角的边框的半径。它仅在三值和四值语法中使用。
右上角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框右上角的边框的半径。它仅在四值语法中使用。
右下角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框右下角的边框的半径。它仅在三值和四值语法中使用。
左下角		是一个 `<length>` 或一个 `<percentage>`，表示用于元素框左下角的边框的半径。它仅在四值语法中使用。