border-bottom-right-radius
**border-bottom-right-radius** CSS 属性通过指定定义角落曲率的椭圆的半径（或半长轴和半短轴的半径）来对元素的右下角进行圆角处理。
尝试一下
圆角可以是圆形或椭圆形，如果其中一个值为 0，则不进行圆角处理，角落为方形。
背景，无论是图像还是颜色，都在边框处裁剪，即使是圆角边框；裁剪的准确位置由 background-clip 属性的值定义。
**注意：** 如果此属性的值未设置在应用于元素后的 border-radius 简写属性中，则此属性的值将由 简写属性 重置为其初始值。
语法
css
/* The corner is a circle */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;
/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */
/*The corner is an ellipse */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;
/* Global values */
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: revert-layer;
border-bottom-right-radius: unset;
使用一个值
- 该值是一个
<length>或一个<percentage>，表示用于该角落边框的圆形的半径。
使用两个值
- 第一个值是一个
<length>或一个<percentage>，表示用于该角落边框的椭圆的水平半长轴。 - 第二个值是一个
<length>或一个<percentage>，表示用于该角落边框的椭圆的垂直半长轴。
值
<length-percentage>-
表示圆形半径的大小或椭圆的半长轴和半短轴。作为绝对长度，它可以使用 CSS
<length>数据类型允许的任何单位表示。水平轴的百分比表示边框框的宽度，垂直轴的百分比表示边框框的高度。负值无效。
正式定义
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素；但用户代理不需要将它们应用于 table 和 inline-table 元素，当 border-collapse 为 collapse 时。目前，内部表格元素的行为未定义。它也应用于 ::first-letter。 |
| 继承 | 否 |
| 百分比 | 表示边框框的对应尺寸 |
| 计算值 | 两个绝对 <length> 或 <percentage> |
| 动画类型 | 一个 长度，百分比 或 calc()； |
正式语法
border-bottom-right-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
示例
圆弧
单个 <length> 值会产生圆弧。
css
div {
border-bottom-right-radius: 40px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
椭圆弧
两个不同的 <length> 值会产生椭圆弧。
css
div {
border-bottom-right-radius: 40px 20px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
带有百分比半径的正方形元素
带有单个 <percentage> 值的正方形元素会产生圆弧。
css
div {
border-bottom-right-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
非正方形元素带有百分比半径
带有单个 <percentage> 值的非正方形元素会产生椭圆弧。
css
div {
border-bottom-right-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 200px;
height: 100px;
}
规范
| 规范 |
|---|
| CSS 背景和边框模块 Level 3 # border-radius |
浏览器兼容性
BCD 表格仅在浏览器中加载