border-block-start-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính border-block-start-style trong CSS xác định kiểu của đường viền bắt đầu khối logic của một phần tử, ánh xạ tới kiểu viền vật lý tùy thuộc vào chế độ viết, chiều hướng và hướng văn bản của phần tử. Thuộc tính này tương ứng với border-top-style, border-right-style, border-bottom-style hoặc border-left-style tùy theo giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Try it
border-block-start-style: dotted;
writing-mode: horizontal-tb;
border-block-start-style: dotted;
writing-mode: vertical-rl;
border-block-start-style: groove;
writing-mode: horizontal-tb;
border-block-start-style: dashed;
writing-mode: vertical-lr;
<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-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;
/* Giá trị toàn cục */
border-block-start-style: inherit;
border-block-start-style: initial;
border-block-start-style: revert;
border-block-start-style: revert-layer;
border-block-start-style: unset;
Các thuộc tính liên quan là border-block-end-style, border-inline-start-style và border-inline-end-style, xác định kiểu viền còn lại của phần tử.
Giá trị
<'border-style'>-
Kiểu đường của đường viền. Xem
border-style.
Định nghĩa chính thức
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
border-block-start-style =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
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-start-style: dashed;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # border-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 viền vật lý:
border-top-style,border-right-style,border-bottom-stylehoặcborder-left-style. writing-mode,direction,text-orientation