border-left
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS viết tắt border-left thiết lập tất cả các thuộc tính của đường viền bên trái của một phần tử.
Try it
border-left: solid;
border-left: dashed red;
border-left: 1rem solid;
border-left: thick double #32a1ce;
border-left: 4mm ridge rgb(211 220 50 / 0.6);
<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;
}
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-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;
/* Giá trị toàn cục */
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;
Ba giá trị của thuộc tính viết tắt có thể được chỉ định theo bất kỳ thứ tự nào, và một hoặc hai trong số chúng có thể được bỏ qua.
Giá trị
<br-width>-
Xem
border-left-width. <br-style>-
Xem
border-left-style. <color>-
Xem
border-left-color.
Mô tả
Như với tất cả các thuộc tính viết tắt, border-left luôn thiết lập giá trị của tất cả các thuộc tính mà nó có thể thiết lập, ngay cả khi chúng không được chỉ định. Những thuộc tính không được chỉ định sẽ được đặt về giá trị mặc định. Xét đoạn code sau:
border-left-style: dotted;
border-left: thick green;
Thực ra nó tương đương với:
border-left-style: dotted;
border-left: none thick green;
Giá trị của border-left-style được đặt trước border-left sẽ bị bỏ qua. Vì giá trị mặc định của border-left-style là none, nên nếu không chỉ định phần border-style, sẽ không có đường viền nào được hiển thị.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements. It also applies to ::first-letter. |
| 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-left =
<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ụ
Áp dụng đường viền bên trái
HTML
<div>This box has a border on the left side.</div>
CSS
div {
border-left: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |