CSS border-inline-end 属性

主题

定义和用法

border-inline-end用于在元素的行内方向末端（即书写方向的末尾）设置边框宽度、颜色和样式。

border-inline-end是一个简写属性，可以同时设置以下三个属性：

默认值：	medium none currentcolor
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderInlineEnd="pink dotted 5px"Demo ❯

下面通过演示实例，让你更直观地了解border-inline-end属性的用法。

1. 为行内方向末端的边框设置宽度、颜色和样式：

实例代码运行代码

复制

div {
    border-inline-end: 10px solid pink;
}

2. 行内方向末端的边框位置受direction属性的影响：

实例代码运行代码

复制

div {
    direction: rtl;
    border-inline-end: 5px solid hotpink;
}

3. 行内方向末端的边框位置受writing-mode属性的影响：

实例代码运行代码

复制

div {
    writing-mode: vertical-rl;
    border-inline-end: 5px solid blue;
}

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;

值	描述
border-inline-end-width	指定元素在行内方向末端的边框宽度（默认值为 "medium"）。
border-inline-end-style	指定元素在行内方向末端的边框样式（默认值为 "none"）。
border-inline-end-color	指定元素在行内方向末端的边框颜色（默认值为当前边框颜色）。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。