Xem trước bo góc

Áp dụng border-radius: 50% cho phần tử hình vuông để tạo hình tròn hoàn hảo. Đặt cả bốn góc ở 50%.

Có, border-radius có thể có bốn giá trị riêng lẻ theo thứ tự: top-left, top-right, bottom-right, bottom-left. Cho phép tạo hình dạng bất đối xứng độc đáo.

Sáu đến mười hai pixel cho nút bấm và tám đến mười sáu cho thẻ là hợp với hầu hết giao diện. Điều quan trọng hơn con số cụ thể là sự nhất quán: nếu nút và ô nhập trên cùng một màn hình có độ bo khác nhau, bố cục sẽ trông xộc xệch. Khi trong thẻ có ảnh, hãy để bán kính bo của phần tử bên trong nhỏ hơn bên ngoài một chút, nếu không hai đường cong sẽ lệch nhau thấy rõ.

50% có nghĩa là "một nửa mỗi cạnh", nên nếu phần tử không phải hình vuông thì bán kính ngang và dọc khác nhau, kết quả là hình elip. Muốn hình tròn thật sự, hãy đặt width và height bằng nhau hoặc thêm aspect-ratio: 1. Nếu muốn dạng viên thuốc cho nút bấm có chiều rộng thay đổi theo chữ, hãy dùng một giá trị cố định lớn như 9999px thay cho 50% — khi đó hai đầu luôn là nửa hình tròn hoàn hảo theo chiều cao hiện có.