border-block-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Thuộc tính border-block-style trong CSS xác định kiểu của các đường viền logic theo chiều khối của một phần tử, tương ứng với một kiểu đường viền vật lý tùy thuộc vào chế độ viết, hướng và hướng văn bản của phần tử. Nó tương ứng với các thuộc tính border-top-style và border-bottom-style, hoặc border-left-style và border-right-style tùy theo các giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Kiểu đường viền theo chiều ngang có thể được đặt với border-inline-style, vốn đặt border-inline-start-style và border-inline-end-style.
Try it
border-block-style: dotted;
writing-mode: horizontal-tb;
border-block-style: dotted;
writing-mode: vertical-rl;
border-block-style: groove;
writing-mode: horizontal-tb;
direction: rtl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Cú pháp
/* Giá trị <'border-style'> */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;
/* Giá trị toàn cục */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;
Giá trị
<'border-style'>-
Kiểu đường kẻ của đường viền. Xem
border-style.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
border-block-style =
<'border-top-style'>{1,2}
<border-top-style> =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
Đường viền nét đứt với văn bản dọc
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 5px solid blue;
border-block-style: dashed;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-style |
Tương thích trình duyệt
Xem thêm
- CSS Logical Properties and Values
- Thuộc tính này ánh xạ tới một trong các thuộc tính đường viền vật lý:
border-top-style,border-right-style,border-bottom-stylehoặcborder-left-style. writing-mode,direction,text-orientation