CSS border-block-end-width 属性确定逻辑 block-end 边框宽度，并根据元素的书写模式、方向性和文本方向转换为物理边框宽度。
语法
border-block-end-width: medium | thin | thick | length | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| medium | 指定了中等宽度的边框。默认值。 |
| thin | 指定一个细边框。 |
| thick | 指定一个粗边框。 |
| length | 厚度可以用值的形式给出。 |
| initial | 将该属性设置为其默认值。 |
| inherit | 将继承父元素的属性。 |
CSS border-block-end-width属性的示例
以下示例说明了具有不同值的 border-block-end-width 属性。
使用边框块端宽的中等边框
为 border-block-end-width 设置一个中等边框，我们使用中等值。在以下示例中，使用了中等值。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 10%;
border-block-end-width:medium;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-width Property
</h2>
<p class="box">
This shows the border-block-end-width
property with medium value.
</p>
</body>
</html>
使用边框块端宽的细边框
为了为 border-block-end-width 设置一个细边框，我们使用 thin 值。在以下示例中，使用了瘦值。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 10%;
border-block-end-width:thin;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-width Property
</h2>
<p class="box">
This shows the border-block-end-width
property with thin value.
</p>
</body>
</html>
使用边框块端部宽度的粗边框
为了根据我们的选择为 border-block-end-width 设置粗边框，我们使用粗值。在以下示例中，使用了 thick 值。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 10%;
border-block-end-width:thick;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-width Property
</h2>
<p class="box">
This shows the border-block-end-width
property with thick value.
</p>
</body>
</html>
使用边框块端宽的自定义边框
为了设置 border-block-end-widths 的边框厚度，我们根据我们的选择指定厚度值。在以下示例中，使用了 20px 的厚度值。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 10%;
border-block-end-width:20px;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-width Property
</h2>
<p class="box">
This shows the border-block-end-width
property with 20px value.
</p>
</body>
</html>
边框块端部宽度，带书写模式
书写模式会影响 border-block-end-width 属性，因为它决定了边框的方向。顶部和底部边框的水平模式和左右边框的垂直模式。以下示例显示了这些内容。
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal {
border: 1px solid black;
padding: 8%;
writing-mode: horizontal-tb;
border-block-end-width: 15px;
}
#vertical {
border: 1px solid black;
padding: 8%;
writing-mode: vertical-rl;
border-block-end-width: 15px;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-width Property
</h2>
<p id="horizontal">
This shows the border-block-end-width property
with 15px value in horizontal mode.
</p>
<p id="vertical">
This shows the border-block-end-width property
with 15px value in vertical mode.
</p>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-block-end-width | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
