Tạo bo góc CSS

Cách sử dụng

1. Màn hình đã có một thẻ bo góc (16px) — kéo thanh trượt Bán kính hoặc đổi đơn vị (px / %) và mọi thứ cập nhật trực tiếp, không cần nhấn nút.
2. Chuyển chế độ bằng các chip: “Mọi góc” điều khiển một thanh trượt, “Từng góc” chỉnh bốn góc độc lập (TL, TR, BR, BL), “Elip” thêm bán kính ngang và dọc cho mỗi góc (cú pháp dấu gạch chéo).
3. Nhấp vào một preset (Sắc cạnh, Thẻ bo góc, Hình tròn, Viên thuốc, Chiếc lá, Blob) để tải hình dạng dựng sẵn — chế độ và đơn vị tự theo. Sao chép toàn bộ khai báo border-radius chỉ với một cú nhấp.

Phạm vi, giới hạn và câu hỏi thường gặp

• Chỉ border-radius: không có góc mượt/liên tục kiểu iOS (squircle) — những thứ đó cần clip-path hoặc SVG và nằm ngoài phạm vi.
• Không dán giá trị CSS có sẵn: mọi giá trị đến từ thanh trượt, preset và chip chế độ, nên không có gì bị phân tích sai.
• Khi các bán kính liền kề cộng lại lớn hơn một cạnh, trình duyệt thu nhỏ chúng theo tỷ lệ. Phần xem trước là kết quả kết xuất thật; ô mã hiển thị giá trị bạn đặt.
• Preset Viên thuốc xuất 9999px — cách viết tắt phổ biến cho “bo tròn tối đa”; trình duyệt giới hạn nó ở nửa cạnh ngắn hơn.
• Phần trăm được đo theo từng trục: bán kính ngang so với chiều rộng, bán kính dọc so với chiều cao (phần xem trước là hình vuông nên cả hai đọc như nhau ở đó). Trên phần tử có kích thước khác, cùng phần trăm sẽ cho hình dạng khác.
• Không lưu hay chia sẻ gì qua tham số trên liên kết: làm mới trang là quay về Thẻ bo góc mặc định. Mọi thứ chạy trong trình duyệt.