border-block-color
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-color trong CSS xác định màu sắc của các đường viền khối logic của một phần tử, ánh xạ tới mà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-color và border-bottom-color, hoặc border-right-color và border-left-color tùy theo giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Màu viền ở chiều còn lại có thể được thiết lập bằng border-inline-color, thuộc tính này thiết lập border-inline-start-color và border-inline-end-color.
Try it
border-block-color: red;
writing-mode: horizontal-tb;
border-block-color: #32a1ce;
writing-mode: vertical-rl;
border-block-color: rgb(170 50 220 / 0.6);
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
css
border-block-color: yellow;
border-block-color: #f5f6f7;
/* Giá trị toàn cục */
border-block-color: inherit;
border-block-color: initial;
border-block-color: revert;
border-block-color: revert-layer;
border-block-color: unset;
Giá trị
<color>-
Màu sắc của đường viền.
Định nghĩa chính thức
| Initial value | currentcolor |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | by computed value type |
Cú pháp chính thức
border-block-color =
<'border-top-color'>{1,2}
<border-top-color> =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Ví dụ
Viền với văn bản dọc
HTML
html
<div>
<p class="exampleText">Example text</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 10px solid blue;
border-block-color: red;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-color |
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 các thuộc tính viền vật lý:
border-top-color,border-right-color,border-bottom-color, hoặcborder-left-color. writing-mode,direction,text-orientation