⬭ Công cụ tạo CSS Border-Radius

Giới thiệu

Công cụ tạo CSS Border-Radius này cung cấp ba chế độ chỉnh sửa trong một công cụ miễn phí, có thể dùng offline: chế độ Đơn giản điều chỉnh cả bốn góc cùng lúc, chế độ Từng góc cho phép tinh chỉnh từng góc độc lập, và chế độ Elliptic mở khóa bán kính ngang và dọc riêng biệt cho từng góc — tận dụng toàn bộ cú pháp rút gọn của CSS border-radius. Sơ đồ SVG trực tiếp phản ánh mọi thay đổi theo thời gian thực, và nút Blob Ngẫu nhiên dùng thuật toán ngẫu nhiên mã hoá học để tạo ra các hình blob hữu cơ phổ biến trong thiết kế UI hiện đại. Vì mọi thứ đều chạy trong trình duyệt, thiết kế của bạn được bảo mật hoàn toàn và công cụ hoạt động ngay cả khi không có kết nối internet.

Cách sử dụng

1. Chọn chế độ — Đơn giản (tất cả các góc), Từng góc, hoặc Elliptic (bán kính x/y riêng biệt) — bằng các nút ở phía trên của bảng điều khiển.
2. Kéo các thanh trượt hoặc nhập giá trị trực tiếp vào ô số để đặt bán kính cho từng góc. Bản xem trước trực tiếp và sơ đồ SVG cập nhật ngay lập tức.
3. Nhấn Blob Ngẫu nhiên để tạo hình blob hữu cơ ngẫu nhiên bằng cách sử dụng các bán kính elliptic độc lập — rất phù hợp cho các thành phần UI trang trí và nền hero.
4. Xem lại cú pháp CSS rút gọn được tạo trong ô kết quả — công cụ tự động áp dụng cú pháp hợp lệ ngắn nhất (ví dụ: gộp các giá trị giống nhau).
5. Nhấn Sao chép CSS để copy mã vào clipboard, sau đó dán trực tiếp vào stylesheet hoặc công cụ thiết kế của bạn.

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

Công cụ tạo CSS Border-Radius này có hoàn toàn miễn phí không?

Có, hoàn toàn miễn phí 100% — không cần tài khoản, không đăng ký, không giới hạn ẩn. Mở trang và bắt đầu tạo CSS border-radius ngay lập tức.

Công cụ có hoạt động offline hoặc không cần kết nối internet không?

Có. Công cụ chạy hoàn toàn trong trình duyệt mà không gọi đến máy chủ. Sau khi trang đã tải xong, bạn có thể ngắt kết nối internet và công cụ vẫn tiếp tục hoạt động. Cài đặt cuối cùng của bạn cũng được lưu cục bộ trong trình duyệt.

Dữ liệu thiết kế của tôi có được bảo mật không?

Hoàn toàn bảo mật. Không có dữ liệu nào rời khỏi trình duyệt của bạn — không upload, không phân tích dữ liệu đầu vào, không lưu trữ trên máy chủ. Tất cả đều ở lại trên thiết bị của bạn.

Chế độ Elliptic làm gì?

Chế độ Elliptic cho phép bạn đặt bán kính ngang (x) và dọc (y) riêng biệt cho từng góc trong bốn góc, tạo ra cú pháp rút gọn CSS border-radius đầy đủ với ký hiệu dấu gạch chéo — ví dụ: border-radius: 40% 20% / 20% 40%. Điều này mở khóa các hình dạng bất đối xứng và hình trứng mà chế độ Đơn giản và Từng góc không thể tạo ra.

Nút Blob Ngẫu nhiên dùng để làm gì?

Blob Ngẫu nhiên sử dụng thuật toán ngẫu nhiên mã hoá học để tạo ra hình dạng hữu cơ, bất quy tắc bằng cách gán các bán kính elliptic ngẫu nhiên cho tất cả tám tổ hợp góc-trục. Rất lý tưởng để tạo các hình blob mềm mại thường thấy trong landing page hiện đại, ảnh đại diện và nền trang trí — chỉ với một cú nhấp.