border-block-end
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-end trong CSS là thuộc tính viết tắt để thiết lập các giá trị thuộc tính viền kết thúc khối logic riêng lẻ tại một chỗ trong stylesheet.
Try it
border-block-end: solid;
writing-mode: horizontal-tb;
border-block-end: dashed red;
writing-mode: vertical-rl;
border-block-end: 1rem solid;
writing-mode: horizontal-tb;
border-block-end: thick double #32a1ce;
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: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Thuộc tính thành phần
Thuộc tính này là viết tắt của các thuộc tính CSS sau:
Cú pháp
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;
/* Giá trị toàn cục */
border-block-end: inherit;
border-block-end: initial;
border-block-end: revert;
border-block-end: revert-layer;
border-block-end: unset;
border-block-end có thể được dùng để thiết lập giá trị cho một hoặc nhiều thuộc tính trong số border-block-end-width, border-block-end-style và border-block-end-color. Viền vật lý mà thuộc tính này ánh xạ tới phụ 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, border-right, border-bottom hoặc border-left tùy theo giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Các thuộc tính liên quan là border-block-start, border-inline-start và border-inline-end, xác định các viền còn lại của phần tử.
Giá trị
border-block-end được chỉ định với một hoặc nhiều giá trị sau, theo bất kỳ thứ tự nào:
<'border-width'>-
Độ rộng của đường viền. Xem
border-width. <'border-style'>-
Kiểu đường viền. Xem
border-style. <color>-
Màu sắc của đường viền.
Định nghĩa chính thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Cú pháp chính thức
border-block-end =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
Viền 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-rl;
border-block-end: 5px dashed blue;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-shorthands |
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,border-right,border-bottomhoặcborder-left. writing-mode,direction,text-orientation