border-top-right-radius是CSS3引入的边框圆角属性家族中的一员，专门负责设置元素右上角的圆角半径。与border-radius可以一次性设置四个角不同，它允许开发者单独控制右上角这一个角落的弧度，这在制作不对称设计效果时非常实用，比如标签页的激活状态、带方向指向的气泡提示框等。本文将从语法、取值、实际案例到常见问题，完整讲解这个属性的用法。
一、border-top-right-radius的基本语法与取值
该属性的基本语法非常简单，它接受一个或两个长度值或百分比值。写法如下：
/* 单值写法：水平半径和垂直半径相等 */
.box1 {
border-top-right-radius: 20px;
}
/* 双值写法：第一个值是水平半径，第二个值是垂直半径 */
.box2 {
border-top-right-radius: 40px 10px;
}
/* 百分比写法：相对于元素的宽高计算 */
.box3 {
border-top-right-radius: 50%;
}当只写一个值时，浏览器会把水平和垂直方向的半径设置为相同的数值，右上角呈现标准的四分之一圆弧。而使用两个值时，第一个值控制水平方向的半径，第二个值控制垂直方向的半径，此时圆角会变成四分之一椭圆的形状。例如border-top-right-radius: 40px 10px会生成一个横向拉伸的扁平弧线。
百分比值是相对于元素自身的尺寸来计算的。水平方向的百分比参照元素的宽度，垂直方向的百分比参照元素的高度。如果给一个宽高都是200px的元素设置border-top-right-radius: 50%，右上角的圆弧半径就是100px。需要注意的是，百分比在小尺寸元素上容易产生意料之外的效果，实际开发中建议优先使用像素值，除非确实需要响应式的圆角。
二、实际应用案例讲解
下面通过几个典型的界面效果来演示该属性的实际用途。第一个案例是制作一个只有右上角是圆角的卡片，这种设计在新闻列表或者置顶推荐模块中很常见：
<style>
.card {
width: 300px;
height: 120px;
background-color: #4a90d9;
color: #fff;
padding: 20px;
box-sizing: border-box;
/* 只设置右上角圆角 */
border-top-right-radius: 30px;
}
</style>
<div class="card">
这是一张只有右上角带圆角的卡片
</div>第二个案例是聊天气泡。左侧用户发送的消息通常左上角是直角而右上角是圆角，右侧回复的消息则相反。通过组合border-top-left-radius和border-top-right-radius就能实现这种方向感很强的对话界面：
/* 用户发送的消息：右上角圆角 */
.msg-left {
background-color: #95ec69;
border-top-right-radius: 16px;
border-top-left-radius: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
/* 对方回复的消息：左上角圆角 */
.msg-right {
background-color: #f0f0f0;
border-top-left-radius: 16px;
border-top-right-radius: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}第三个案例是椭圆弧的运用。当需要让右上角呈现一种被斜向切开的视觉效果时，双值写法就派上用场了，比如border-top-right-radius: 60px 20px会让弧线横向跨度更大，看起来更加舒展，适合用在横幅或者头部区域的装饰上。
三、与其他圆角属性的关系及常见问题排查
border-top-right-radius实际上等价于border-radius简写属性中斜杠前的第二个值。也就是说border-radius: 10px 20px 30px 40px里的20px就是右上角的圆角。在实际开发中要注意书写顺序，border-radius的四个值分别对应左上、右上、右下、左下，遵循顺时针方向。
有一个容易被忽略的规则是简写属性的覆盖问题。如果先写了border-radius: 20px，再写border-top-right-radius: 50px，那么右上角会被成功覆盖为50px；但反过来，如果简写写在后面，单独设置的值就会被覆盖掉。因此建议将单独角的设置放在简写属性之后，或者干脆只使用简写形式统一管理。
另一个常见问题是圆角设置了却不生效。原因通常有几种：一是元素上存在背景图或者渐变，部分旧版浏览器对圆角裁剪背景的支持不完整；二是使用了overflow: hidden的父容器配合绝对定位的子元素，子元素的内容可能溢出圆角区域，此时需要在父元素上也加overflow: hidden；三是元素的display属性为某些特殊值导致无法渲染圆角。排查时可以先检查计算样式面板，确认该属性是否被正确应用，再逐步排除覆盖和继承的干扰。
最后值得一提的是，如果给圆角值设置了超过元素尺寸一半的数值，浏览器会自动将半径缩小到刚好不重叠的临界值，不会出现圆弧互相覆盖的情况，这是CSS规范内置的保护机制，开发者不需要手动处理这种边界情况。掌握这些细节后，就能在各类页面布局中熟练运用右上角圆角，做出层次更丰富的视觉效果。
border-top-right-radiusCSS圆角边框半径修改时间：2026-09-12 19:10:27