border-inline-start
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 CSS border-inline-start là thuộc tính viết tắt dùng để thiết lập các giá trị riêng lẻ của đường viền logic phía đầu theo chiều ngang nội tuyến trong một khai báo duy nhất trong style sheet.
Try it
border-inline-start: solid;
writing-mode: horizontal-tb;
border-inline-start: dashed red;
writing-mode: vertical-rl;
border-inline-start: 1rem solid;
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: 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 cho các thuộc tính CSS sau:
Cú pháp
border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;
/* Giá trị toàn cục */
border-inline-start: inherit;
border-inline-start: initial;
border-inline-start: revert;
border-inline-start: revert-layer;
border-inline-start: unset;
Đường viền vật lý mà border-inline-start á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ử. Nó tương ứng với thuộc tính border-top, border-right, border-bottom, hoặc border-left tùy theo các giá trị được xác định cho writing-mode, direction, và text-orientation.
Các thuộc tính liên quan là border-block-start, border-block-end, và border-inline-end, xác định các đường viền còn lại của phần tử.
Giá trị
Thuộc tính border-inline-start đượ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 của đường viền. Xem
border-style. <color>-
Màu sắc của đường viền.
Định nghĩa hì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 hình thức
border-inline-start =
<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ụ
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border-inline-start: 5px dashed blue;
}
Thông số 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
- Thuộc tính và giá trị logic CSS
- 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,border-right,border-bottom, hoặcborder-left. writing-mode,direction,text-orientation