CSS border-top-right-radius 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border-top-right-radius 是 CSS 属性，用于设置元素右上角的圆角效果。

border-top-right-radius 属性可以接受 1 或 2 个值，1 个值：同时设置水平和垂直半径，2 个值：第一个设置水平半径，第二个设置垂直半径（创建椭圆形圆角）

默认值：	0
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderTopRightRadius="5px"

常用的实例

下面通过一些示例，让你更直观地了解 border-top-right-radius 属性的用法：

实例代码运行代码

复制

/* 单个值 - 圆形圆角 */
.example1 {
    border-top-right-radius: 10px;
}

/* 两个值 - 椭圆形圆角 */
.example2 {
    border-top-right-radius: 20px 10px;
}

/* 百分比值 */
.example3 {
    border-top-right-radius: 50%;
}

/* 混合单位 */
.example4 {
    border-top-right-radius: 15px 30%;
}

CSS 语法

border-top-right-radius: length | percentage [length | percentage];

属性值

值	描述
`length`	指定圆角的半径长度（如 px, em, rem 等）。
`percentage`	以百分比指定圆角半径，相对于元素的边框盒尺寸。