CSS border-radius
Thuộc tính border-radius CSS xác định độ bo góc của element.
Mẹo: Thuộc tính này cho phép bạn thêm các góc tròn vào các element!
Dưới đây là ba ví dụ:
1. Các góc được làm tròn cho một element có màu nền được chỉ định:
2. Các góc được làm tròn cho element có đường viền:
3. Các góc được làm tròn cho một element có hình nền:
#rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
Mẹo: Thuộc tính border-radius thực sự là thuộc tính viết tắt cho các thuộc tính border-top-left-radius, border-top-right-radius, border-bottom-right-radius và border-bottom-left-radius.
Chỉ định các góc cho CSS border-radius
Thuộc tính border-radius có thể có từ một đến bốn giá trị. Đây là các quy tắc:
Bốn giá trị - border-radius: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới cùng bên trái):
Ba giá trị - border-radius: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải và dưới cùng bên trái, giá trị thứ ba áp dụng cho góc dưới cùng bên phải):
Hai giá trị - border-radius: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải, giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):
Một giá trị - border-radius: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn bằng nhau:
#rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
Bạn cũng có thể tạo các góc hình elip:
#rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }