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-top-left-radiusborder-top-right-radiusborder-bottom-right-radius,和 border-bottom-left-radius 简写为一个属性。

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

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

radius all-corner.png 可以是 <length> 或者 <percentage>,表示边框四角的圆角半径。只在单值语法中使用。 top-left-and-bottom-right top-left-bottom-right.png 可以是 <length> 或者 <percentage>,表示边框左上角和右下角的圆角半径。只在双值语法中使用。 top-right-and-bottom-left top-right-bottom-left.png 可以是 <length> 或者 <percentage>,表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 top-left top-left.png 可以是 <length> 或者 <percentage>,表示边框左上角的圆角半径。只在三值或四值语法中使用。 top-right top-right.png 可以是 <length> 或者 <percentage>,表示边框右上角的圆角半径。只在四值语法中使用。 bottom-right bottom-rigth.png 可以是 <length> 或者 <percentage>,表示边框右下角的圆角半径。只在三值或四值语法中使用。 bottom-left bottom-left.png 可以是 <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;

形式定义

初始值该简写所对应的每个属性:
适用元素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.
是否是继承属性
Percentagesrefer to the corresponding dimension of the border box
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

形式语法

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

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

示例

在线示例

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-radius
4 values for 4 corners
Elliptical borders
Percentages

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见