border-width
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 viết tắt border-width CSS đặt độ rộng đường viền của một phần tử.
Try it
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;
<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: palegreen;
color: black;
border: 0 solid crimson;
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
css
/* Giá trị từ khóa */
border-width: thin;
border-width: medium;
border-width: thick;
/* Giá trị <length> */
border-width: 4px;
border-width: 1.2rem;
/* trên và dưới | trái và phải */
border-width: 2px 1.5em;
/* trên | trái và phải | dưới */
border-width: 1px 2em 1.5cm;
/* trên | phải | dưới | trái */
border-width: 1px 2em 0 4rem;
/* Giá trị toàn cục */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;
Thuộc tính border-width có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị.
- Khi chỉ định một giá trị, nó áp dụng cùng độ rộng cho cả bốn cạnh.
- Khi chỉ định hai giá trị, giá trị đầu tiên áp dụng cho cạnh trên và dưới, giá trị thứ hai áp dụng cho cạnh trái và phải.
- Khi chỉ định ba giá trị, giá trị đầu tiên áp dụng cho cạnh trên, giá trị thứ hai áp dụng cho cạnh trái và phải, giá trị thứ ba áp dụng cho cạnh dưới.
- Khi chỉ định bốn giá trị, các độ rộng được áp dụng theo thứ tự trên, phải, dưới, trái (theo chiều kim đồng hồ).
Giá trị
<line-width>-
Định nghĩa độ rộng của đường viền, có thể là giá trị
<length>không âm tường minh hoặc một từ khóa. Nếu là từ khóa, nó phải là một trong các giá trị sau:thin- Tương đương
1px.
- Tương đương
medium- Tương đương
3px.
- Tương đương
thick- Tương đương
5px.
- Tương đương
Đị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-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Ví dụ
Kết hợp giá trị và độ dài
HTML
html
<p id="one-value">một giá trị: đường viền rộng 6px trên cả 4 cạnh</p>
<p id="two-values">
hai giá trị khác nhau: đường viền rộng 2px ở trên và dưới, rộng 10px ở phải và
trái
</p>
<p id="three-values">
ba giá trị khác nhau: 0.3em ở trên, 9px ở dưới, và độ rộng bằng 0 ở phải và
trái
</p>
<p id="four-values">
bốn giá trị khác nhau: "thin" ở trên, "medium" ở phải, "thick" ở dưới, và 1em
ở trái
</p>
CSS
css
#one-value {
border: ridge #cccccc;
border-width: 6px;
}
#two-values {
border: solid red;
border-width: 2px 10px;
}
#three-values {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#four-values {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Khả năng tương thích trình duyệt
Xem thêm
- Các thuộc tính viết tắt liên quan đến đường viền:
border,border-style,border-color - Các thuộc tính liên quan đến độ rộng đường viền:
border-bottom-width,border-left-width,border-right-width,border-top-width