Border Radius Generator

Giới thiệu công cụ

Thuộc tính border-radius bo tròn các góc của phần tử. Khi bốn giá trị bằng nhau, sử dụng giá trị đơn rút gọn. Các giá trị khác nhau tạo ra hình không đối xứng — hình viên thuốc dùng 50% ở tất cả các góc, hình lá xen kẽ 0% và 50%.

Nhấp vào số góc để nhập giá trị trực tiếp, hoặc kéo thanh trượt liên kết để thay đổi cả bốn góc cùng lúc. Tắt Khóa tất cả góc để điều khiển từng góc độc lập.

Cách sử dụng

1. Nhập giá trị vào bốn ô góc (trên-trái, trên-phải, dưới-trái, dưới-phải).
2. Bật Khóa tất cả góc để đặt cả bốn giá trị đồng thời bằng thanh trượt.
3. Chuyển đổi giữa đơn vị px và % tùy theo nhu cầu thiết kế.
4. Nhấp vào preset (Viên thuốc, Lá, Blob, v.v.) để áp dụng hình dạng định sẵn ngay lập tức.

Trường hợp sử dụng

Nhà thiết kế UI dùng border-radius để tạo nút, thẻ và hình dạng avatar. Nhà phát triển điều chỉnh góc tròn để phù hợp với hệ thống thiết kế thương hiệu. Hình viên thuốc (50%) thường dùng cho tag và badge. Các giá trị không đối xứng tạo hình lá hoặc blob hữu cơ cho các phần tử trang trí.

Câu hỏi thường gặp

• Sự khác biệt giữa px và % là gì? — px cho bán kính góc cố định bất kể kích thước phần tử. % là tương đối với chiều rộng và chiều cao của phần tử — 50% ở tất cả các góc tạo ra hình tròn hoàn hảo (nếu phần tử là hình vuông).
• Có thể đặt bán kính khác nhau cho mỗi góc không? — Có. Bỏ chọn Khóa tất cả góc và nhập giá trị khác nhau vào từng ô góc.
• Đầu ra rút gọn có nghĩa là gì? — Khi bốn góc bằng nhau, đầu ra là một giá trị duy nhất. Khi khác nhau, thứ tự CSS là: trên-trái, trên-phải, dưới-phải, dưới-trái.