Làm tròn các góc với css
Góc làm tròn
Với thuộc tính CSS border-radius, chúng ta có thể làm tròn các góc cho bất kỳ phần tử HTML nào.
Thuộc tính CSS border-radius
Thuộc tính CSS border-radius xác định bán kính của các góc của một phần tử HTML.
Xem các ví dụ sau:
1. Các góc được làm tròn cho một phần tử có màu nền được chỉ định:
Các góc được làm tròn
2. Các góc được làm tròn cho phần tử có đường viền.
Các góc được làm tròn
3. Các góc được làm tròn cho một phần tử có hình nền.
Các góc được làm tròn
Ví dụ
#rcorners1 { border-radius: 25px; background: blue; padding: 20px; width: 200px; height: 150px; }
Thuộc tính CSS border-radius - Các góc cụ thể
Thuộc tính border-radius có thể có từ một đến bốn giá trị. Sau đây là các quy tắc.
4 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).
3 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).
2 giá trị border-radius:15px 50px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái và góc dưới cùng bên phả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).
1 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).
Ví dụ
#rcorners1 { border-radius: 15px 50px 30px 5px; background: blue; padding: 20px; width: 200px; height: 150px; }
Chúng ta cũng có thể tạo các góc hình elipse.
Ví dụ
#rcorners1 { border-radius: 50px / 15px; background: blue; padding: 20px; width: 200px; height: 150px; }