css中的border-right-style属性是专门用于定义元素右侧边框样式的属性，它属于css边框模块的一部分，能够单独控制元素右边界的显示形态，不需要同时设置其他三个方向的边框样式，使用起来非常灵活。
border-right-style属性基本定义
border-right-style是css的一个简写属性吗？不是，它是单独作用于右侧边框的样式属性，用来指定右侧边框的线条类型。该属性的默认值是none，也就是默认情况下元素右侧没有边框显示。它的优先级高于border-style属性中针对右侧边框的通用设置，如果同时设置了border-style和border-right-style，最终会以border-right-style的设置为准。
border-right-style支持的常用取值
该属性支持多种取值，用来实现不同的边框效果，常用的取值如下：
- none：无边框，即使设置了border-right-width和border-right-color也不会显示边框
- hidden：隐藏边框，效果类似none，但在表格边框合并场景中会有特殊表现
- solid：实线边框，最常用的值
- dashed：虚线边框，由一段段的短线组成
- dotted：点状边框，由一个个圆点组成
- double：双实线边框，两条实线之间有一定间隔
- groove：3D凹槽边框，视觉效果看起来边框向内凹陷
- ridge：3D凸槽边框，视觉效果看起来边框向外凸起
- inset：3D内嵌边框，元素整体看起来像嵌入页面
- outset：3D外嵌边框，元素整体看起来像凸出页面
border-right-style使用示例
下面通过具体的代码示例展示不同取值的实际效果，首先准备一个基础的html结构：
<div class="box">这是一个测试盒子</div>
然后通过css设置不同的border-right-style值，代码如下：
/* 实线右侧边框 */
.box-solid {
width: 200px;
height: 100px;
border-right-width: 2px;
border-right-color: #333;
border-right-style: solid;
}
/* 虚线右侧边框 */
.box-dashed {
width: 200px;
height: 100px;
border-right-width: 2px;
border-right-color: #ff0000;
border-right-style: dashed;
}
/* 点状右侧边框 */
.box-dotted {
width: 200px;
height: 100px;
border-right-width: 3px;
border-right-color: #00ff00;
border-right-style: dotted;
}
/* 双实线右侧边框 */
.box-double {
width: 200px;
height: 100px;
border-right-width: 4px;
border-right-color: #0000ff;
border-right-style: double;
}
上述代码中，我们分别为四个不同的盒子设置了不同的border-right-style值，同时搭配了border-right-width设置边框宽度，border-right-color设置边框颜色，这样边框才能正常显示。如果只设置border-right-style为solid，没有设置宽度和颜色，那么边框宽度默认是medium，颜色默认是元素文本颜色。
和其他边框属性的配合规则
border-right-style需要和另外两个右侧边框属性配合使用才能完整显示右侧边框：
| 属性名 | 作用 | 默认值 |
|---|---|---|
| border-right-width | 设置右侧边框的宽度 | medium |
| border-right-color | 设置右侧边框的颜色 | 元素文本颜色 |
| border-right-style | 设置右侧边框的样式 | none |
如果要简化代码，也可以使用border-right简写属性一次性设置三个值，顺序没有强制要求，不过通常按照宽度、样式、颜色的顺序书写，示例如下：
.box-short {
width: 200px;
height: 100px;
/* 同时设置右侧边框宽度、样式、颜色 */
border-right: 2px solid #666;
}
注意如果简写属性中没有写border-right-style，那么默认会设置为none，导致边框不显示，所以简写时至少要包含style值。
使用注意事项
- 当border-right-style设置为none时，无论是否设置了border-right-width和border-right-color，右侧边框都不会显示
- border-right-style的取值对border-right-width的解析有影响，比如设置为none时，宽度计算为0
- 如果要兼容旧版本浏览器，需要注意部分3D样式取值（如groove、ridge等）在极低版本浏览器中可能无法正常显示
- 该属性可以单独使用，不会影响元素其他三个方向的边框设置，适合只需要调整右侧边框样式的场景
cssborder-right-style边框样式前端开发修改时间：2026-06-24 02:15:28