Cách dùng Trình tạo Border Radius
- Kéo thanh trượt để bo tròn cả bốn góc, hoặc chọn Từng góc để đặt riêng trên-trái, trên-phải, dưới-phải và dưới-trái.
- Đổi đơn vị:
pxđể bo cố định,%để bo theo kích thước phần tử (50% trên hình vuông sẽ thành hình tròn). - Chọn Elliptical hoặc Blob ngẫu nhiên để có hình hữu cơ với 8 giá trị.
- Sao chép CSS — đoạn code đã được rút gọn về số giá trị ít nhất vẫn cho ra cùng hình dạng.
Cách hoạt động của giá trị border-radius
| CSS | Các góc |
|---|---|
border-radius: 12px | cả bốn góc |
border-radius: 12px 4px | trên-trái & dưới-phải, trên-phải & dưới-trái |
border-radius: 12px 8px 4px 0 | trên-trái, trên-phải, dưới-phải, dưới-trái (theo chiều kim đồng hồ) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptical: bán kính ngang / bán kính dọc — hình blob |
Nút dạng viên thuốc: dùng giá trị lớn như 9999px — trình duyệt sẽ giới hạn ở một nửa chiều cao, nên hai đầu luôn tròn ở mọi kích thước. Hình tròn: 50% trên phần tử hình vuông. Phần trăm được tính theo chiều rộng (với bán kính ngang) và chiều cao (với bán kính dọc) của khung.
Xem thêm: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
Cũng được tìm dưới tên: border radius generator, công cụ border radius, bo góc css, css border radius, tạo bo góc css, css blob generator, tạo hình blob css, bo tròn góc css online.
Các công cụ dùng kèm tốt với Trình tạo Border Radius
- Trình tạo CSS Grid — Đặt số cột, số hàng và khoảng cách, sau đó kéo qua các ô để tạo các vùng như header, sidebar và main.
- Trình tạo CSS Filter — Điều chỉnh blur, brightness, contrast, saturation, hue, grayscale, sepia, invert và drop shadow trên ảnh mẫu hoặc ảnh của bạn, rồi sao chép CSS filter.
- Tạo Cubic Bezier — Tạo đường cong easing bằng cách kéo hai tay cầm và đua nó với các easing chuẩn.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm thế nào để bo góc trong CSS?
Dùng border-radius, ví dụ border-radius: 12px cho cả bốn góc, hoặc bốn giá trị cho trên-trái, trên-phải, dưới-phải và dưới-trái.
Làm thế nào để tạo nút dạng viên thuốc?
Đặt border-radius là một giá trị lớn như 9999px. Trình duyệt sẽ giới hạn ở một nửa chiều cao, nên hai đầu luôn tròn đều.
Làm thế nào để tạo hình tròn?
Đặt chiều rộng và chiều cao bằng nhau, rồi dùng border-radius: 50%.
Dấu gạch chéo trong border-radius có nghĩa là gì?
Các giá trị trước dấu gạch chéo là bán kính ngang, các giá trị sau là bán kính dọc, nên mỗi góc trở thành một hình elip. Đó là cách tạo hình blob.
Tôi có thể cài Trình tạo Border Radius như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo Border Radius là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.