Hướng dẫn border size css - kích thước đường viền css
|
Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua: Show
1) Thuộc tính border-width trong CSS- Thuộc tính border-width dùng để thiết lập "độ dày" đường viền của phần tử HTML.border-width dùng để thiết lập "độ dày" đường viền của phần tử HTML. - Ví dụ: Đường viền của phần tử này được thiết lập độ dày là 1px Đường viền của phần tử này được thiết lập độ dày là 3px Đường viền của phần tử này được thiết lập độ dày là 5px 2) Cách sử dụng thuộc tính border-width trong CSS- Để sử dụng thuộc tính border-width, ta dùng cú pháp như sau:border-width, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị thuộc tính border-width có thể được xác định bởi một trong sáu loại:border-width có thể được xác định bởi một trong sáu loại:
medium- Đường viền của phần tử có độ dày vừa phải (tương đương 3px) border-width với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn cạnh của phần tử sẽ có chung một độ dày. thick
initial - Sử dụng giá trị mặc định của nó.(mặc định thì giá trị thuộc tính border-style của các phần tử là medium)inherit
- Kế thừa giá trị thuộc tính border-width từ phần tử cha của nó.3) Xác định độ dày đường viền ở từng cạnh
- Đường viền phía bên phải của phần tử này có độ dày 10px - Đường viền phía dưới của phần tử này có độ dày 15px - Đường viền phía bên trái của phần tử này có độ dày 0px |
| Mã CSS đường viền | Kết quả |
|---|---|
| Thiết lập sẽ không kẻ viền |
| Thiếu size, do vậy size lấy mặc định |
| Thiếu màu, do vậy lấy màu mặc định |
border-width, border-color, border-style
Ngoài cách viết đường viền theo thuộc tính
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
Độ rộng đường là giá trị theo đơn vị px, em ...
Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba
Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hiddennone, dotted, dashed, double, groove, ridge, inset, outset, hidden
Ví dụ:
border-width: value1 value2 value3 value 4;Không kẻ khung.
Kiểu dotted.
Kiểu dashed.
Kiểu double.
Kiểu grooved.
Kiểu ridged.
Kiểu inset.
Kiểu outset.
Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).
Đường viền theo từng cạnh boder-left (top, bottom, right)
Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.
Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính:
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
border-width: value1 value2 value3;border-width: value1 value2 value3;border-width: value1 value2 value3 value 4;Ví dụ kể viền trên dưới
Tương tự như
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
- Đường viền phía bên trái của phần tử này có độ dày 0px
border-width: value1 value2 value3;
5border-width: value1 value2 value3;
6border-width: value1 value2 value3;
7border-width: value1 value2 value3;
8border-width: value1 value2 value3;
9border-width: value1 value2 value3;
0- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
1- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
2- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
3- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
4- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
5- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
6- Đường viền phía trên của phần tử này có độ dày 5px
- Đường viền phía bên trái & phải của phần tử này có độ dày 10px
- Đường viền phía dưới của phần tử này có độ dày 15px
Tham khảo thêm CSS bo tròn góc với css :border-radius
