Công cụ này làm gì
Trình tạo bo góc cho phép bạn tạo hình các góc bo tròn trực quan và sao chép CSS ngắn nhất. Dùng một bán kính cho mọi góc hoặc riêng cho từng góc, bật góc elip để mỗi góc có bán kính ngang và dọc riêng, và xem bản xem trước thay đổi khi bạn kéo. Hỗ trợ px, %, rem và em, và bạn có thể dán giá trị border-radius có sẵn để chỉnh sửa. Mọi thứ chạy trong trình duyệt của bạn.
Cách sử dụng
- Bắt đầu từ một mẫu có sẵn hoặc giữ hình ví dụ.
- Chọn Đơn vị. Đổi đơn vị sẽ quy đổi các giá trị hiện tại (rem và em tính là 16px, % tương đối với hộp xem trước).
- Bật Cùng bán kính cho mọi góc để chỉ dùng một thanh trượt, hoặc tắt để đặt riêng Trên trái, Trên phải, Dưới phải và Dưới trái.
- Bật Góc elip để mỗi góc có thanh trượt Ngang và Dọc.
- Đổi kích thước bản xem trước bằng Chiều rộng và Chiều cao, rồi sao chép mã từ thẻ CSS. Bật xuất thuộc tính đầy đủ nếu bạn muốn bốn thuộc tính riêng.
Ví dụ
.avatar { border-radius: 50%; }
.tab { border-radius: 12px 12px 0 0; }
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }Nên biết
- Dạng ngắn nhất. Kết quả gộp các giá trị giống nhau: bốn góc bằng nhau thành một giá trị, và phần sau dấu gạch chéo bị bỏ khi mọi góc đều tròn.
- Phần trăm theo kích thước hộp. Phần trăm ngang tính theo chiều rộng phần tử, phần trăm dọc theo chiều cao, nên 50% trên hình chữ nhật cho hình elip chứ không phải hình tròn.
- Bán kính không vừa được trình duyệt thu nhỏ cùng lúc — vì vậy giá trị px rất lớn tạo ra viên thuốc gọn gàng.
- Phần tử con và tràn. Góc bo cắt nền và viền, nhưng không cắt nội dung phần tử con: thêm overflow: hidden để cắt ảnh bên trong hộp.
Câu hỏi thường gặp
› Dấu gạch chéo trong border-radius nghĩa là gì?
Các giá trị trước dấu gạch chéo là bán kính ngang, sau đó là bán kính dọc. Khi chúng khác nhau, góc trở thành một phần tư hình elip thay vì hình tròn. Ví dụ 50% / 30% cho đường cong dẹt hơn 50%.
› Bốn góc được viết theo thứ tự nào?
Theo chiều kim đồng hồ từ góc trên trái: trên trái, trên phải, dưới phải, dưới trái. Khi ít giá trị hơn, CSS lặp lại chúng: hai giá trị đặt trên trái/dưới phải và trên phải/dưới trái, ba giá trị đặt trên trái, trên phải/dưới trái và dưới phải.
› Làm sao tạo hình tròn hoặc hình viên thuốc?
border-radius: 50% biến hình vuông thành hình tròn và hình chữ nhật thành hình elip. Để có viên thuốc với hai đầu tròn ở mọi chiều rộng, dùng độ dài rất lớn như 9999px: trình duyệt thu nhỏ các bán kính không vừa, nên hai đầu vẫn tròn hoàn hảo.
› Hình blob được tạo thế nào?
Blob dùng tám phần trăm khác nhau: bốn bán kính ngang và bốn bán kính dọc, như 30% 70% 70% 30% / 30% 30% 70% 70%. Chọn một mẫu blob, bật Góc elip rồi kéo thanh trượt của từng góc để chỉnh hình.