Công cụ tạo CSS Border Radius

Tạo Border Radius là gì?

Đặt bán kính của từng góc riêng biệt, tùy chọn với bán kính ngang và dọc khác nhau cho góc elip, theo px hoặc %. Công cụ xem trước hình dạng và viết dạng viết tắt border-radius tương đương ngắn nhất.

Cách sử dụng Tạo Border Radius

1. Chọn một mẫu có sẵn (Bo tròn, Viên thuốc, Hình tròn, Hình blob, Chiếc lá, Vé) hoặc tự đặt giá trị.
2. Chọn Đơn vị (px hoặc %) và bật Góc elip (X/Y riêng) nếu bạn muốn bán kính X/Y riêng.
3. Chỉnh từng góc (Trên trái, Trên phải, Dưới phải, Dưới trái); đánh dấu Liên kết tất cả các góc để đổi chúng cùng lúc.
4. Đổi chiều rộng, chiều cao và màu trong Cài đặt xem trước để xem hình dạng ở kích thước của bạn.
5. Sao chép mã CSS.

Ví dụ

Đơn vị %, elip: trên trái 30/30, trên phải 70/30, dưới phải 70/70, dưới trái 30/70

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Khi nào nên dùng Tạo Border Radius

Dùng cho thẻ bo tròn, nút viên thuốc, avatar và hình blob hữu cơ làm thuần bằng CSS. Phần trăm co giãn theo phần tử (50% trên hình vuông cho ra hình tròn). Với đa giác bất kỳ hoặc hình có đường cắt thẳng, hãy dùng công cụ tạo Clip Path; với hình hữu cơ phức tạp nhiều điểm, hãy dùng công cụ tạo SVG Blob.

Tạo Border Radius hoạt động như thế nào

Các góc được sắp theo thứ tự trên trái, trên phải, dưới phải, dưới trái, đúng như CSS yêu cầu. Mỗi nhóm bốn giá trị được rút gọn theo quy tắc viết tắt chuẩn: giá trị thứ tư bị bỏ khi bằng giá trị thứ hai, giá trị thứ ba khi bằng giá trị thứ nhất, và giá trị thứ hai khi bằng giá trị thứ nhất. Với góc elip, bán kính dọc đứng sau dấu gạch chéo (h / v); phần sau dấu gạch chéo bị bỏ khi mọi bán kính dọc bằng bán kính ngang tương ứng.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Nút và tag hình viên thuốc
• ✓ Avatar hình tròn
• ✓ Ảnh hình blob hữu cơ với bán kính elip 8 giá trị
• ✓ Thẻ hình vé hoặc hình chiếc lá
• ✓ Góc bong bóng hội thoại bất đối xứng

Câu Hỏi Thường Gặp

Khám phá thêm danh mục