Thuộc tính border
Định nghĩa và sử dụng Thuộc tính border được dùng để định dạng đường viền cho thành phần. Cấu trúc tag { Thuộc tính: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính định dạng Thuộc tính giá trị Mô tả border-color mã màu tên màu Giá trị rgb Xác định […]
Định nghĩa và sử dụng
Thuộc tính border được dùng để định dạng đường viền cho thành phần.
Cấu trúc
tag {
Thuộc tính: giá trị;
}
Với thuộc tính và giá trị như sau:
Thuộc tính định dạng
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| border-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc của đường viền. |
| border-style | kiểu border | Xác định hình dạng của đường viền. |
| border-width | px thin medium thick |
Xác định bề dày của đường viền. |
Thuộc tính vị trí
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| border-top | Một hoặc nhiều giá trị của các thuộc tính định dạng. | Xác định đường viền bên trên. |
| border-right | Một hoặc nhiều giá trị của các thuộc tính định dạng. | Xác định đường viền bên phải. |
| border-bottom | Một hoặc nhiều giá trị của các thuộc tính định dạng. | Xác định đường viền bên dưới. |
| border-left | Một hoặc nhiều giá trị của các thuộc tính định dạng. | Xác định đường viền bên trái. |
| border | Một hoặc nhiều giá trị của các thuộc tính định dạng. | Xác định tất cả các đường viền xung quanh. |
Kết hợp giữa thuộc tính vị trí và thuộc tính định dạng
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| border-top-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc cho đường viền bên trên. |
| border-top-style | kiểu border | Xác định hình dạng cho đường viền bên trên. |
| border-top-width | px thin medium thick |
Xác định bề dày cho đường viền bên trên. |
| border-right-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc cho đường viền bên phải. |
| border-right-style | kiểu border | Xác định hình dạng cho đường viền bên phải. |
| border-right-width | px thin medium thick |
Xác định bề dày cho đường viền bên phải. |
| border-bottom-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc cho đường viền bên dưới. |
| border-bottom-style | kiểu border | Xác định hình dạng cho đường viền bên dưới. |
| border-bottom-width | px thin medium thick |
Xác định bề dày cho đường viền bên dưới. |
| border-left-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc cho đường viền bên trái. |
| border-left-style | kiểu border | Xác định hình dạng cho đường viền bên trái. |
| border-left-width | px thin medium thick |
Xác định bề dày cho đường viền bên trái. |
| border-color | mã màu tên màu Giá trị rgb |
Xác định màu sắc cho tất cả các đường viền xung quanh. |
| border-style | kiểu border | Xác định hình dạng cho tất cả các đường viền xung quanh. |
| border-width | px thin medium thick |
Xác định chiều rộng cho tất cả các đường viền xung quanh. |
Kiểu cho border:
| giá trị | Mô tả |
|---|---|
| none | Xác định thành phần sẽ không có đường viền. |
| hidden | Giống như giá trị none, nhưng được dùng cho table. |
| dotted |
Xác định đường viền cho thành phần là dấu chấm (dotted). |
| dashed |
Xác định đường viền cho thành phần là gạch ngang (dashed). |
| solid |
Xác định đường viền cho thành phần là đường thẳng nét (solid). |
| double |
Xác định đường viền cho thành phần là 2 đường thẳng nét (double). |
| groove |
Xác định đường viền cho thành phần là đường rãnh (groove). |
| ridge |
Xác định đường viền cho thành phần là đường chóp (ridge). |
| inset |
Xác định đường viền cho thành phần là đường bóng bên trong (inset). |
| outset |
Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). |
| inherit | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Tuy sử dụng rất nhiều thuộc tính như vậy, nhưng chúng ta chỉ cần chú ý đến các “thuộc tính vị trí” là có thể sử dụng được tất cả các dạng cần thiết, chỉ những trường hợp riêng biệt mới cần sử dụng tới các “thuộc tính định dạng”.
Cấu trúc
tag {
Thuộc tính: width style color;
}
Chú ý: width, style, color có thể theo thứ tự bất kỳ.
Ví dụ
Html viết:
<html> <head></head> <body> <p>Đây là tag p có border top 2px dạng solid màu đỏ.</p> <p>Đây là tag p có border right 2px dạng solid màu đỏ.</p> <p>Đây là tag p có border bottom 2px dạng solid màu đỏ.</p> <p>Đây là tag p có border left 2px dạng solid màu đỏ.</p> <p>Đây là tag p có border 2px dạng solid màu đỏ.</p> </body> </html>
CSS viết:
p {
border-top: 2px solid #ff0000;
}
p {
border-right: 2px solid #ff0000;
}
p {
border-bottom: 2px solid #ff0000;
}
p {
border-left: 2px solid #ff0000;
}
p {
border: 2px solid #ff0000;
}
Hiển thị trình duyệt:
Đây là tag p có border top 2px dạng solid màu đỏ.
Đây là tag p có border top 2px dạng solid màu đỏ.
Đây là tag p có border top 2px dạng solid màu đỏ.
Đây là tag p có border top 2px dạng solid màu đỏ.
Đây là tag p có border top 2px dạng solid màu đỏ.
Trình duyệt hỗ trợ
- Internet Explorer
- Firefox
- Opera
- Google Chrome
- Safari
