Trình tạo Border Radius
Công cụ tạo CSS border-radius đặt bo góc cho từng góc của phần tử theo phần trăm bằng thanh trượt riêng hoặc một thanh All Corners, kèm các mẫu như hình tròn, chiếc lá và blob, rồi sao chép CSS.
Về công cụ này
Công cụ tạo CSS border-radius đặt bo góc cho từng góc của phần tử theo phần trăm bằng thanh trượt riêng hoặc một thanh All Corners, kèm các mẫu như hình tròn, chiếc lá và blob, rồi sao chép CSS.
Cách sử dụng
- Kéo thanh trượt cho từng góc, hoặc dùng All Corners.
- Thử một mẫu như Circle, Leaf hoặc Blob.
- Thay đổi kích thước xem trước nếu cần.
- Bấm Copy CSS.
Điều nên biết
- border-radius nhận tối đa bốn giá trị theo thứ tự trên-trái, trên-phải, dưới-phải, dưới-trái.
- border-radius: 50% trên phần tử hình vuông sẽ tạo ra hình tròn.
- Bán kính theo phần trăm co giãn theo kích thước phần tử; bán kính theo pixel thì cố định.
- Bán kính không đều ở các góc đối diện tạo ra hình chiếc lá và blob mà không cần SVG.
- border-radius được hỗ trợ trên mọi trình duyệt hiện nay mà không cần tiền tố.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để bo góc bằng CSS?
Đặt border-radius, ví dụ border-radius: 12px; cho tất cả các góc, hoặc bốn giá trị cho từng góc riêng.
Làm sao để tạo hình tròn bằng CSS?
Cho phần tử chiều rộng và chiều cao bằng nhau và border-radius: 50%.
Bốn giá trị border-radius theo thứ tự nào?
Trên-trái, trên-phải, dưới-phải, dưới-trái — theo chiều kim đồng hồ bắt đầu từ góc trên bên trái.
border-radius nên dùng px hay %?
Dùng px để có góc bo đồng nhất cho nút và thẻ; dùng % cho các hình như tròn và blob cần co giãn theo phần tử.