CSS Border Radius Generator là gì?

CSS Border Radius Generator là một công cụ trực quan cho phép bạn tạo các hình dạng border-radius tùy chỉnh bằng cách kéo các tay cầm trực tiếp trên bản xem trước trực tiếp. Thay vì đoán các giá trị CSS, bạn sẽ thấy hình dạng thay đổi theo thời gian thực khi bạn điều chỉnh nó.

Công cụ hỗ trợ cả chế độ Simple (4 giá trị góc) cho các góc bo tròn tiêu chuẩn và chế độ Advanced (cú pháp 8 giá trị với ngang/dọc cho mỗi góc) để tạo các hình blob hữu cơ, trứng, giọt nước và các hình dạng sáng tạo khác.

Hoàn hảo cho: Công cụ này loại bỏ quá trình thử và sai khi viết mã border-radius thủ công, cung cấp cho bạn phản hồi trực quan tức thì và mã CSS sẵn sàng sản xuất.

Công cụ này dành cho ai?

Nhà Phát Triển Web

Cần các giá trị border-radius chính xác cho các nút, thẻ, vùng chứa và các thành phần UI với độ chính xác từng pixel.

Nhà Thiết Kế

Muốn khám phá các hình blob hữu cơ cho các phần hero, các phần tử trang trí và các thiết kế UI hiện đại.

Những Người Đam Mê CSS

Bất kỳ ai làm việc với CSS đều muốn có một cách nhanh hơn, trực quan hơn để hình dung và tạo mã border-radius.

Table of Contents

1. CSS Border Radius Generator là gì?
- 1.1. Công cụ này dành cho ai?
2. Cách Sử Dụng
3. Các Tính Năng
4. Các Câu Hỏi Thường Gặp

Cách Sử Dụng

Sử Dụng Cơ Bản (Chế Độ Simple)

Điều Chỉnh Giá Trị Góc

Sử dụng các thanh trượt hoặc nhập giá trị trong các trường nhập số để đặt bán kính cho mỗi góc (Trên Trái, Trên Phải, Dưới Phải, Dưới Trái).

Khóa hoặc Mở Khóa Các Góc

Chuyển đổi Lock All để làm cho tất cả các góc thay đổi cùng nhau, hoặc mở khóa để điều chỉnh từng góc độc lập cho các hình dạng không đối xứng.

Kéo Các Tay Cầm

Bản xem trước hình dạng cập nhật ngay lập tức — bạn cũng có thể kéo các tay cầm trực tiếp trên hình dạng để chỉnh sửa trực quan trực quan.

Sao Chép Mã CSS

Sao chép mã CSS được tạo bằng nút Copy CSS và dán nó trực tiếp vào bảng kiểu của bạn.

Tạo Các Hình Dạng Hữu Cơ (Chế Độ Advanced)

Chuyển Sang Chế Độ Advanced

Chuyển sang chế độ Advanced để truy cập 8 giá trị — mỗi góc có các điều khiển bán kính ngang (H) và dọc (V) riêng biệt.

Sử Dụng Cú Pháp Dấu Gạch Chéo

Điều này cho phép cú pháp dấu gạch chéo CSS: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 cho các góc hình elip và các hình dạng hữu cơ.

Tinh Chỉnh Với 8 Tay Cầm

Kéo 8 tay cầm dọc theo các cạnh của hình dạng, hoặc sử dụng các thanh trượt để kiểm soát chính xác các giá trị bán kính ngang và dọc.

Tạo Các Hình Dạng Ngẫu Nhiên

Nhấp Random để tạo các hình blob thú vị ngay lập tức — hoàn hảo cho khám phá sáng tạo và các thiết kế độc đáo.

Sử Dụng Preset

Nhấp vào công tắc Presets để tiết lộ 12 hình dạng tích hợp bao gồm Rounded, Pill, Circle, Leaf, Drop, Egg và các kiểu Blob khác nhau. Nhấp vào một preset sẽ tự động áp dụng các giá trị của nó và chuyển sang chế độ thích hợp.

Bắt Đầu Nhanh: Preset là cách nhanh nhất để bắt đầu. Chọn một preset gần với hình dạng mong muốn của bạn, sau đó tinh chỉnh nó bằng các thanh trượt hoặc kéo các tay cầm.

Máy Tính Bán Kính Lồng Nhau

Khi đặt một phần tử con bo tròn bên trong một cha bo tròn với padding, bán kính bên trong phải được tính toán là: inner = max(0, outer - padding). Mở phần Nested Radius Calculator, nhập bán kính ngoài và padding, và công cụ sẽ tính toán bán kính bên trong chính xác với bản xem trước trực quan.

Không Tính Toán

Bán Kính Không Khớp

Các góc bên trong không căn chỉnh với góc ngoài
Khoảng cách trực quan khó chịu
Giao diện không chuyên nghiệp

Với Tính Toán

Căn Chỉnh Hoàn Hảo

Bán kính bên trong chính xác về mặt toán học
Các đường cong mịn, nhất quán
Giao diện chuyên nghiệp, bóng bẩy

Các Tính Năng

Hai Chế Độ Chỉnh Sửa

Chế độ Simple cung cấp 4 thanh trượt cho các góc bo tròn tiêu chuẩn. Chế độ Advanced tiết lộ cú pháp CSS border-radius 8 giá trị đầy đủ, cho phép bạn đặt bán kính ngang và dọc độc lập cho mỗi góc cho các hình blob hữu cơ.

Các Tay Cầm Kéo Trực Quan

Các tay cầm kéo được đặt trực tiếp trên bản xem trước hình dạng. Ở chế độ Simple, 4 tay cầm nằm ở các góc. Ở chế độ Advanced, 8 tay cầm xuất hiện dọc theo các cạnh với các đường hướng dẫn hiển thị hướng bán kính.

Chuyển Đổi Đơn Vị (px / %)

Chuyển đổi giữa các đơn vị pixel và phần trăm. Các giá trị được tự động chuyển đổi khi bạn chuyển đổi, vì vậy hình dạng của bạn vẫn nhất quán trên các hệ thống đơn vị khác nhau.

Khóa Tất Cả Các Góc

Khi bị khóa, điều chỉnh bất kỳ góc nào sẽ áp dụng cùng một giá trị cho tất cả bốn góc để bo tròn đồng nhất. Mở khóa để kiểm soát riêng lẻ và các thiết kế không đối xứng.

12 Preset Tích Hợp

Nhanh chóng áp dụng các hình dạng phổ biến: Rounded, Pill, Circle, Leaf, Ticket, Drop, Egg, Blob (3 biến thể), Badge và Message. Mỗi preset hiển thị bản xem trước hình dạng mini để dễ dàng lựa chọn.

Randomize

Tạo các hình blob hữu cơ ngẫu nhiên chỉ bằng một cú nhấp chuột. Công cụ tự động chuyển sang chế độ Advanced và tạo các hình dạng blob độc đáo hoàn hảo cho các dự án sáng tạo.

Bản Xem Trước Có Thể Tùy Chỉnh

Điều chỉnh kích thước bản xem trước (chiều rộng và chiều cao từ 100px đến 500px) để kiểm tra cách border-radius của bạn trông như thế nào ở các kích thước phần tử khác nhau. Thay đổi màu hình dạng và màu nền bằng các bộ chọn màu tích hợp.

Máy Tính Bán Kính Lồng Nhau

Một tiện ích có thể thu gọn tính toán border-radius bên trong chính xác khi một phần tử con nằm bên trong một cha được padding và bo tròn. Nhập bán kính ngoài và padding để lấy bán kính bên trong chính xác về mặt toán học, với bản xem trước trực quan.

Đầu Ra CSS Tức Thì

Mã CSS được tạo cập nhật theo thời gian thực và có thể được sao chép vào clipboard của bạn chỉ bằng một cú nhấp chuột. Đầu ra sử dụng ký hiệu viết tắt và bao gồm cú pháp dấu gạch chéo khi các giá trị ngang và dọc khác nhau.

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

Sự khác biệt giữa chế độ Simple và Advanced là gì?

Chế độ Simple sử dụng border-radius 4 giá trị tiêu chuẩn (một giá trị cho mỗi góc) — hoàn hảo cho các nút, thẻ và các phần tử UI tiêu chuẩn với các góc bo tròn hình tròn.

Chế độ Advanced sử dụng cú pháp CSS 8 giá trị trong đó mỗi góc có bán kính ngang và dọc riêng biệt, cho phép các hình blob hữu cơ, các góc hình elip và các hình dạng sáng tạo không thể thực hiện được với 4 giá trị.

Dấu gạch chéo (/) trong border-radius có nghĩa là gì?

Thuộc tính CSS border-radius hỗ trợ cú pháp dấu gạch chéo: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.

Các giá trị trước dấu gạch chéo kiểm soát bán kính ngang, và các giá trị sau kiểm soát bán kính dọc. Khi những giá trị này khác nhau, các góc trở thành hình elip thay vì hình tròn, tạo ra các hình dạng hữu cơ như trứng, giọt nước và blob.

Ví dụ: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% tạo ra một hình dạng giống trứng với độ cong ngang và dọc khác nhau.

Tôi nên sử dụng px hay % cho border-radius?

Sự lựa chọn phụ thuộc vào trường hợp sử dụng của bạn:

Sử dụng px cho các phần tử kích thước cố định như các nút và biểu tượng nơi bạn muốn kiểm soát chính xác và bo tròn nhất quán bất kể kích thước phần tử
Sử dụng % cho các phần tử phản hồi hoặc khi tạo các hình blob/hữu cơ — 50% trên một hình vuông tạo ra một hình tròn hoàn hảo, và các giá trị phần trăm được chia tỷ lệ theo tỷ lệ với kích thước phần tử

Mẹo chuyên nghiệp: Đối với các thiết kế phản hồi, các giá trị phần trăm thường hoạt động tốt hơn vì chúng duy trì bo tròn tỷ lệ khi các phần tử thay đổi kích thước.

Máy Tính Bán Kính Lồng Nhau dùng để làm gì?

Khi bạn có một phần tử cha bo tròn với padding, phần tử con bên trong cần một border-radius nhỏ hơn để trông đúng và duy trì sự hài hòa trực quan.

Công thức là: inner radius = max(0, outer radius - padding)

Ví dụ: Một thẻ có border-radius 16px và padding 8px cần bán kính bên trong 8px trên vùng nội dung của nó. Nếu không tính toán này, các góc bên trong sẽ không căn chỉnh đúng với đường cong ngoài, tạo ra một khoảng cách trực quan khó chịu.

Lỗi phổ biến: Sử dụng cùng một giá trị border-radius cho cả phần tử cha và con khi có padding — điều này tạo ra các góc không căn chỉnh và giao diện không chuyên nghiệp.

Tôi có thể sử dụng CSS được tạo trong bất kỳ framework nào không?

Có. Đầu ra là CSS tiêu chuẩn hoạt động trong tất cả các trình duyệt hiện đại và tương thích với bất kỳ framework hoặc môi trường phát triển nào.

Bạn có thể dán nó trực tiếp vào:

Bảng kiểu CSS tiêu chuẩn (tệp .css)
Kiểu nội tuyến trong HTML
Giải pháp CSS-in-JS (styled-components, Emotion, v.v.)
Mô-đun CSS
Giá trị tùy ý Tailwind CSS
Bất kỳ bộ tiền xử lý nào (SCSS, LESS, Stylus)

Mã được tạo sử dụng các thuộc tính CSS tiêu chuẩn với hỗ trợ trình duyệt tuyệt vời (IE9+, tất cả các trình duyệt hiện đại).