Trình Tạo Border Radius

Kéo các thanh trượt để định hình từng góc của khung xem trước và sao chép mã CSS border-radius kết quả. Khóa cả bốn góc lại với nhau để có một hình chữ nhật bo tròn đơn giản, hoặc mở khóa để tạo hình viên thuốc, hình lá và các hình khối bất đối xứng.

Công Cụ Này Là Gì?

border-radius là thuộc tính CSS dùng để bo tròn các góc của một phần tử. Khi viết tay, nó cần bốn giá trị theo một thứ tự cố định — trên-trái, trên-phải, dưới-phải, dưới-trái — điều rất dễ bị nhầm lẫn, đặc biệt khi bốn góc có giá trị khác nhau.

Công cụ này loại bỏ việc phải đoán mò: kéo một thanh trượt, xem góc bo tròn ngay trong khung xem trước trực tiếp, và đọc mã CSS chính xác từ ô mã được tạo ra. Một nút khóa duy nhất chuyển đổi giữa bán kính đồng đều (cả bốn góc giống nhau, trường hợp phổ biến nhất) và bốn thanh trượt độc lập cho các hình dạng hữu cơ, bất đối xứng.

Tại Sao Nên Dùng?

Xem trước trực tiếp cập nhật ngay khi bạn kéo — không cần chỉnh sửa CSS rồi tải lại để xem kết quả.
Khóa chỉ với một cú nhấp cho trường hợp phổ biến 'bán kính giống nhau ở mọi góc'; mở khóa cho nút hình viên thuốc, bong bóng thoại và các hình khối.
Xuất dạng viết tắt một giá trị khi tất cả các góc khớp nhau, hoặc dạng đầy đủ bốn giá trị khi khác nhau — sẵn sàng để sao chép-dán trong cả hai trường hợp.
Chạy hoàn toàn trong trình duyệt của bạn. Không có gì bạn nhập vào được gửi đi đâu cả.
Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

Để nguyên 'khóa tất cả các góc' được chọn và kéo bất kỳ thanh trượt nào để đặt một bán kính đồng đều cho toàn bộ khung.
Bỏ chọn khóa để điều khiển từng góc độc lập — hữu ích cho hình viên thuốc, hình giọt nước và thẻ bất đối xứng.
Quan sát khung xem trước cập nhật trực tiếp khi bạn điều chỉnh từng thanh trượt.
Sao chép mã CSS được tạo ra từ ô mã và dán vào stylesheet của bạn.

Ví dụ

Đầu vào

Trên-trái: 40px, Trên-phải: 8px, Dưới-phải: 40px, Dưới-trái: 8px

Đầu ra

border-radius: 40px 8px 40px 8px;

Các góc đối diện không khớp nhau như thế này tạo ra hình dáng lá hoặc cánh hoa — một hiệu ứng phổ biến trong thiết kế thẻ và huy hiệu.

px hay % — nên dùng đơn vị nào?

Công cụ này xuất giá trị theo pixel, đây là lựa chọn mặc định phù hợp cho hầu hết công việc UI: nút, thẻ và ô nhập liệu nơi bạn muốn bán kính góc cố định, dễ dự đoán bất kể kích thước phần tử.

Phần trăm hoạt động khác — giá trị của nó tương đối theo chiều rộng và chiều cao của chính phần tử, nên bán kính 50% trên một phần tử vuông tạo ra hình tròn hoàn hảo, còn trên phần tử không vuông tạo ra hình elip. Nếu bạn muốn hiệu ứng đó (ảnh đại diện, các hình khối co giãn theo container), hãy lấy mã CSS được tạo và tự đổi giá trị px sang % — ví dụ border-radius: 50% biến bất kỳ khung vuông nào thành hình tròn.

Các mẫu border-radius phổ biến

Thẻ bo tròn: các góc bằng nhau, khoảng 8-16px cho các thành phần UI.
Nút hình viên thuốc: đặt bán kính bằng một nửa chiều cao của phần tử (hoặc đơn giản dùng 9999px, tự động tạo hình viên thuốc trọn vẹn bất kể chiều cao).
Ảnh đại diện tròn: border-radius: 50% trên một phần tử vuông (chiều rộng và chiều cao bằng nhau).
Bong bóng thoại: ba góc bo tròn, một góc sắc nhọn — đặt ba thanh trượt cao và một về 0.
Hình lá / cánh hoa: các góc đối diện bằng nhau, các góc liền kề khác nhau — ví dụ trên-trái và dưới-phải đều lớn, trên-phải và dưới-trái đều nhỏ.

Kết hợp với bóng đổ

Góc bo tròn hiếm khi xuất hiện một mình — thẻ và nút thường cũng cần một chút bóng đổ để tạo chiều sâu. Dùng Trình Tạo Box Shadow để căn chỉnh bóng đổ và áp dụng cả hai đoạn CSS được tạo lên cùng một phần tử.

→ Trình Tạo Box Shadow · Bộ Chuyển Đổi Đơn Vị

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

Sự khác biệt giữa border-radius và thứ tự các góc là gì?

Cú pháp viết tắt CSS luôn theo thứ tự trên-trái, trên-phải, dưới-phải, dưới-trái, theo chiều kim đồng hồ bắt đầu từ góc trên-trái. Bốn thanh trượt của công cụ này được gắn nhãn đúng theo thứ tự đó, nên bạn không cần tự nhớ thứ tự.

Tôi có thể dùng đơn vị khác nhau cho từng góc không?

Có, trong CSS thực tế bạn có thể trộn px, %, em và rem giữa các góc, dù điều này hiếm khi xảy ra trong thực tế. Công cụ này tạo giá trị px đồng nhất để đơn giản hóa — hãy tự đổi bất kỳ giá trị nào sang % hoặc đơn vị khác trực tiếp trong stylesheet nếu bạn cần đơn vị hỗn hợp.

Tại sao border-radius: 50% đôi khi tạo ra hình bầu dục thay vì hình tròn?

Vì phần trăm tương đối độc lập theo từng trục — bán kính ngang là phần trăm của chiều rộng phần tử, bán kính dọc là phần trăm của chiều cao. Trên một phần tử vuông (chiều rộng và chiều cao bằng nhau) điều đó tạo ra hình tròn hoàn hảo; trên hình chữ nhật thì tạo ra hình elip.

border-radius có ảnh hưởng đến hình nền và viền không?

Có — border-radius cắt nền, viền, và (trên các trình duyệt hiện đại) cả box-shadow của phần tử theo hình dạng bo tròn đó. Nó không cắt nội dung con bị tràn ra ngoài trừ khi bạn cũng đặt overflow: hidden trên phần tử cha.

Có giới hạn về việc bán kính có thể lớn đến mức nào không?

Không có giới hạn cứng nào — nếu bán kính vượt quá một nửa chiều rộng hoặc chiều cao của phần tử, trình duyệt sẽ giới hạn nó sao cho hai đường cong ở cạnh đó gặp nhau chính xác ở giữa, đó là cách một hình vuông trở thành hình tròn hoàn hảo hoặc hình viên thuốc.