CÔNG TY THIẾT KẾ WEBSITE
Kinh doanh hiệu quả hơn trên internet
Border trong css
Border trong css
Thuộc tính border trong css giúp các bạn định dạng độ rộng , kiểu đường viền, màu sắc cho một phần tử.
Thông thường chúng ta sẽ viết như thế này khi tạo đường viền cho một đối tượng:
|
1 |
border: 1px solid red; |
Demo:
border : 1px solid red
Chú thích:
1px : Độ rộng cho đường viền.
solid : Kiểu đường viền
red : Màu của đường viền (Có thể thay bằng mã màu #….)
Ngoài ra các bạn có thể tùy chỉnh riêng từng thuộc tính định dạng của border như sau:
Thuộc tính border-width giúp bạn xác định độ rộng cả đường viền.
|
1 |
border-width: 1px; |
Thuộc tính border-style giúp bạn xác định xem đường viền nên là solid, dashed, double, …
|
1 |
border-style: solid; |
Thuộc tính border-color xác định màu của đường viền.
|
1 |
border-color: red; |
Thuộc tính vị trí của border :
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Style đường viền bên trên */ border-top: 1px solid red; /* Style đường viền bên dưới*/ border-bottom: 1px solid red; /* Style đường viền bên trái*/ border-left: 1px solid red; /* Style đường viền bên phải*/ border-right: 1px solid red; |
Cũng như bạn muốn thay đổi cả thuộc tính vị trí và thuộc tính định dạng thì như sau:
|
1 |
border-top-color: #ffffff; /* Đổi màu của đường viền trên */ |
Tương tự như trên nếu muốn thay đổi độ rộng : width, định dạng: style.
|
1 2 |
border-top-style : dashed; border-top-width : 2px; |
Công ty thiết kế website tại hà nội
Các kiểu hiển thị của dạng style trong border:
| none. | Xác định thành phần sẽ không có đường viền. | border-style: none |
| hidden. | Giống như giá trị none, nhưng được dùng cho table. | border-style: hidden |
| dotted. | Xác định đường viền cho thành phần là dấu chấm (dotted). | border-style: dotted |
| solid | Xác định đường viền cho thành phần là đường thẳng nét (solid). | border-style: solid |
| dashed | Xác định đường viền cho thành phần là gạch ngang (dashed). | border-style: dashed |
| double | Xác định đường viền cho thành phần là 2 đường thẳng nét (double). | border-style: double |
| groove | Xác định đường viền cho thành phần là đường rãnh (groove). | border-style: groove |
| ridge | Xác định đường viền cho thành phần là đường chóp (ridge). | border-style: ridge |
| inset | Xác định đường viền cho thành phần là đường bóng bên trong (inset). | border-style: inset |
| outset | Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). | border-style: 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). | border-style: inherit |
Hiện nay thuộc tính border còn được cải tiến thêm nhiều ở trong css3. Nổi bật là border-radius. Ở bài sau mình sẽ giới thiệu về nó.
Chúc các bạn thành công !
Công ty thiết kế website tại hà nội
