border-radius là gì?
border-radius là gì? Đối với những góc bo tròn, nếu không sử dụng border-radius thì sẽ rất phức tạp khi chỉ dùng CSS. border-radius cho phép tạo độ bo góc tròn linh hoạt, cấu trúc đơn giản dễ sử dụng. Cấu trúc tag { border-radius: giá-trị; } Giá trị VD Mô tả ...
border-radius là gì?
Đối với những góc bo tròn, nếu không sử dụng border-radius thì sẽ rất phức tạp khi chỉ dùng CSS.
border-radius cho phép tạo độ bo góc tròn linh hoạt, cấu trúc đơn giản dễ sử dụng.
Cấu trúc
tag {
border-radius: giá-trị;
}
| Giá trị | VD | Mô tả |
|---|---|---|
| px | 5px | Độ bo góc tròn tính theo pixel |
| % | 50% | Độ bo góc tròn tính theo % |
Cách sử dụng
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div>Border - radius</div> </body> </html>
CSS viết - khi chưa sử dụng border-radius:
div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
text-align: center;
awidth: 100px;
}
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng border-radius để chỉnh độ bo góc tròn của 4 góc như sau.
CSS viết:
div {
border: 3px solid #ffcccc;
border-radius: 10px;
height: 100px;
line-height: 100px;
text-align: center;
awidth: 100px;
}
Hiển thị trình duyệt:
Nhìn kết quả trên, ta thấy 4 góc của <div> đã được thay đổi sang bo góc tròn.
VD sau đây sẽ cho ta thấy rõ hơn về cách sử dụng border-radius, với cách sử dụng giá trị phần trăm (%).
CSS viết:
div {
border: 3px solid #ffcccc;
border-radius: 50%;
height: 100px;
line-height: 100px;
text-align: center;
awidth: 100px;
}
Hiển thị trình duyệt:
Ví dụ thêm
Chúng ta có thể điều khiển từng góc riêng biệt thay vì điều khiển cùng lúc 4 góc.
| Thuộc tính | VD | Mô tả |
|---|---|---|
| border-top-left-radius | border-top-left-radius: 5px | Độ bo góc tròn góc trên - bên trái. |
| border-top-right-radius | border-top-right-radius: 5px | Độ bo góc tròn góc trên - bên phải. |
| border-bottom-left-radius | border-bottom-left-radius: 5px | Độ bo góc tròn góc dưới - bên trái. |
| border-bottom-right-radius | border-bottom-right-radius: 5px | Độ bo góc tròn góc dưới - bên phải. |
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div>Border - radius</div> </body> </html>
CSS viết:
div {
border: 3px solid #ffcccc;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
height: 100px;
line-height: 100px;
text-align: center;
awidth: 100px;
}
Hiển thị trình duyệt:
Tới đây chắc các bạn đã biết cách dùng border-radius như thế nào, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo border-radius hoặc xem công cụ tạo border-radius nhé.
:nth-child
box-shadow
