Đị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 | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| Thuộc tính định dạng | |||
| border-color | mã màu tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb(255,0,0); | Xác định màu sắc của đường viền. |
| border-style | kiểu border | border-style: solid; | Xác định hình dạng của đường viền. |
| border-width | px thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
| Thuộc tính vị trí | |||
| border-top | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border-top: #ff0000 solid 2px; | 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. | border-right: #ff0000 solid 2px; | 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. | border-bottom: #ff0000 solid 2px; | 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. | border-left: #ff0000 solid 2px; | 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. | border: #ff0000 solid 2px; | 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 | |||
| border-top-color | mã màu tên màu Giá trị rgb | border-top-color: #ff0000; border-top-color: red; border-top-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên trên. |
| border-top-style | kiểu border | border-top-style: solid; | Xác định hình dạng cho đường viền bên trên. |
| border-top-width | px thin medium thick | border-top-width: 5px; | 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 | border-right-color: #ff0000; border-right-color: red; border-right-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên phải. |
| border-right-style | kiểu border | border--right-style: solid; | Xác định hình dạng cho đường viền bên phải. |
| border-right-width | px thin medium thick | border-right-width: 5px; | 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 | border-bottom-color: #ff0000; border-bottom-color: red; border-bottom-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên dưới. |
| border-bottom-style | kiểu border | border-bottom-style: solid; | Xác định hình dạng cho đường viền bên dưới. |
| border-bottom-width | px thin medium thick | border-bottom-width: 5px; | 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 | border-left-color: #ff0000; border-left-color: red; border-left-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên trái. |
| border-left-style | kiểu border | border-left-style: solid; | Xác định hình dạng cho đường viền bên trái. |
| border-left-width | px thin medium thick | border-left-width: 5px; | 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 | border-color: #ff0000; border-color: red; border-color: rgb(255,0,0); | Xác định màu sắc cho tất cả các đường viền xung quanh. |
| border-style | kiểu border | border-style: solid; | Xác định hình dạng cho tất cả các đường viền xung quanh. |
| border-width | px thin medium thick | border-width: 5px; | Xác định chiều rộng cho tất cả các đường viền xung quanh. |
Học thiết kế web tại Hà Nội
Học thiết kế đồ họa với wordpress
Học thiết kế web với php
Sign up here with your email
ConversionConversion EmoticonEmoticon