border-inline-end 是一个 CSS 缩写属性，用作在样式表中集中定义多个不同逻辑内联端边框属性的快捷方式。
writing-mode、direction和text-orientation 会影响 border-inline-end 属性映射到真实边框的方式。
它根据提供的书写模式、方向和文本方向值与border-left、border-top、border-right或border-bottom 属性对齐。
相对于 border-inline-end，属性 border-block-start、 border-block-end 和 border-inline-start 一起定义元素的所有边框。
属性值
border-inline-end 使用以下一个或多个值指定:
<'border-width'>: 边框的宽度。
<'border-style'>: 边框的线条样式。
<color>: 边框的颜色。
成分属性
此属性是以下 CSS 属性的简写:
语法
border-inline-end = <line-width> || <line-style> || <color> 适用范围
所有 HTML 元素。
CSS border-inline-end: 基本示例
以下示例演示 border-inline-end 属性的用法。
<html>
<head>
<style>
.container {
background-color: lightgray;
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #e74c3c;
border-radius: 10px;
}
.custom-border {
margin-right: 25px;
text-align: center;
font-family: 'Verdana', sans-serif;
font-size: 20px;
color: #2c3e50;
border-inline-end: 6px double #3498db;
}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">一个使用 border-inline-end 的简单示例。</p>
</div>
</body>
</html> CSS border-inline-end: 书写模式。
以下示例演示垂直书写模式下的 border-inline-end 属性。
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #3498db;
border-radius: 12px;
}
.custom-border {
writing-mode: vertical-rl;
margin-bottom: 10px;
text-align: center;
font-family: 'Helvetica', sans-serif;
font-size: 18px;
color: #333;
border-inline-end: 1rem solid #e74c3c;
}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">border-inline-end 与writing-mode：vertical-rl 的示例；</p>
</div>
</body>
</html>