Trình tạo CSS Border Radius — Công cụ trực tuyến miễn…

Trình tạo CSS Border Radius là gì?

Trình tạo CSS Border Radius trực tuyến miễn phí. Điều chỉnh bán kính bo góc cho từng góc bằng điều khiển trực quan.

Thuộc tính CSS border-radius kiểm soát độ tròn của các góc phần tử, và tính linh hoạt của nó vượt xa các hình chữ nhật bo góc đơn giản. Bằng cách điều chỉnh từng góc một cách độc lập, bạn có thể tạo ra viên con nhộng, hình tròn, hình dạng bất đối xứng và các dạng hữu cơ phức tạp — tất cả chỉ với một thuộc tính CSS duy nhất. CSS Border Radius Generator cung cấp điều khiển thanh trượt riêng cho cả bốn góc với bản xem trước trực tiếp cập nhật ngay lập tức.

Mỗi góc — trên-trái, trên-phải, dưới-phải, dưới-trái — có thanh trượt riêng, cho phép bạn tạo ra các hình dạng hoàn toàn bất đối xứng. Nút chuyển đơn vị giữa pixel (px) và phần trăm (%) thay đổi hành vi một cách đáng kể. Giá trị pixel tạo ra các góc bán kính cố định giữ nguyên kích thước bất kể kích thước phần tử. Giá trị phần trăm gắn bán kính với kích thước phần tử, đó là cách bạn tạo ra các hình tròn hoàn hảo (border-radius: 50% trên một hình vuông).

Bốn cài đặt sẵn bao phủ các trường hợp sử dụng phổ biến nhất. Circle tạo ra border-radius: 50% cho một hình tròn hoàn hảo (hoặc hình elip trên các phần tử không vuông). Pill tạo ra một hình dạng có hai đầu bo tròn hoàn toàn (border-radius: 9999px), hữu ích cho các huy hiệu nút và thẻ nhãn. Card áp dụng độ bo 8px tinh tế phù hợp cho các thành phần thẻ và vùng chứa. Rounded áp dụng độ bo 8px trên mọi góc, phù hợp cho các nút bấm và ô nhập biểu mẫu.

Mã CSS được tạo hiển thị cú pháp viết tắt. Nếu cả bốn góc có cùng giá trị, nó xuất ra một giá trị duy nhất (ví dụ, border-radius: 8px). Nếu các góc khác nhau, nó xuất ra cú pháp bốn giá trị theo thứ tự chiều kim đồng hồ (trên-trái, trên-phải, dưới-phải, dưới-trái). Mã sẵn sàng sao chép cho biểu định kiểu của bạn.

Ví dụ sử dụng thực tế cho Trình tạo CSS Border Radius

Tạo một nút bo tròn với hình dạng viên con nhộng

Hệ thống thiết kế của bạn dùng các nút hình viên con nhộng với chiều cao 24px và hai đầu bo tròn hoàn toàn. Chọn cài đặt sẵn "Pill" cho border-radius: 9999px. Bản xem trước nút hiển thị hình dạng viên con nhộng. Sao chép CSS và áp dụng nó cho thành phần nút của bạn. Điều chỉnh các giá trị góc riêng lẻ nếu bạn muốn một cái nhìn mềm mại hơn.

Thiết kế một hình dạng bất đối xứng cho phần hero

Phần hero của trang đích cần một hình dạng đặc biệt: trên-trái 0px, trên-phải 40px, dưới-phải 0px, dưới-trái 40px. Đặt từng thanh trượt góc một cách độc lập. Bản xem trước hiển thị một hình dạng bất đối xứng độc đáo. CSS được tạo là border-radius: 0 40px 0 40px.

Tạo một avatar hình tròn với bán kính phần trăm

Một avatar người dùng là một hình ảnh vuông 64x64 pixel. Chuyển đơn vị sang % và đặt cả bốn góc thành 50%. Bản xem trước hiển thị một hình tròn hoàn hảo. CSS được tạo là border-radius: 50%, hoạt động trên bất kỳ phần tử vuông nào bất kể kích thước.

Tại sao nên dùng Trình tạo CSS Border Radius?

Individual control for all 4 corners
px and % unit toggle
preview box trực tiếp
4 presets: Circle, Pill, Card, Rounded

Cách sử dụng Trình tạo CSS Border Radius — Hướng dẫn từng bước

Điều chỉnh sliders for each corner (top-left, top-right, bottom-right, bottom-left).

Bật/tắt between px and % units.

Preview the border radius live.

Sao chép CSS code.

Trình tạo CSS Border Radius phù hợp với ai?

UI design
button styling
card design
phát triển web

Mẹo chuyên nghiệp cho Trình tạo CSS Border Radius

1Dùng giá trị pixel cho các phần tử có kích thước cố định (nút, thẻ) nơi bán kính góc nên giữ nguyên không đổi. Dùng giá trị phần trăm cho các phần tử đáp ứng nơi bán kính nên chia tỷ lệ theo phần tử.
2Cài đặt sẵn "Pill" dùng một giá trị pixel rất lớn (9999px) thay vì 50% vì 50% trên một hình chữ nhật tạo ra hình elip, không phải viên con nhộng. Giá trị pixel lớn đảm bảo hai đầu bo tròn hoàn toàn trên bất kỳ phần tử hình chữ nhật nào.
3Đối với một "squircle" (hình vuông có góc hơi bo tròn phổ biến trong iOS), dùng khoảng 10-12% border-radius trên tất cả các góc. Điều này tạo ra cái nhìn mềm mại hơn các giá trị pixel nhỏ.
4Khi dùng giá trị phần trăm, bán kính được tính tương đối với chiều rộng của phần tử (cho trái/phải) và chiều cao (cho trên/dưới). Các phần trăm khác nhau trên các góc ngang so với dọc tạo ra các góc elip.

Trình tạo CSS Border Radius — Các câu hỏi thường gặp

border-radius in CSS là gì?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

Đặt border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Trình tạo CSS Border Radius really free to use?

Yes, Trình tạo CSS Border Radius is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Sẵn sàng sử dụng Trình tạo CSS Border Radius?

Công cụ trực tuyến miễn phí — hoạt động trong trình duyệt, không cần đăng ký. Bắt đầu sử dụng ngay bây giờ.

Dùng thử ngay