Trình tạo border-radius CSS

Thứ tự trong cú pháp viết tắt

border-radius: top-left top-right bottom-right bottom-left;

Giống như margin / padding: theo chiều kim đồng hồ, bắt đầu từ góc trên bên trái. Các giá trị bị bỏ qua sẽ phản chiếu góc đối diện. Vì vậy border-radius: 10px 20px; nghĩa là 10px cho góc trên trái và dưới phải, 20px cho góc trên phải và dưới trái.

Điều trình tạo này không làm

Trình tạo đặt một bán kính cho mỗi góc, nên không bao giờ tạo góc elip (dạng hai giá trị có dấu gạch chéo, như border-radius: 20px 10px / 5px 15px;) hay các thuộc tính khai triển như border-top-left-radius. Nếu cần, hãy tự viết CSS.

Phần trăm so với pixel

50% trên một phần tử hình vuông = hình tròn. Trên hình chữ nhật 200×100, 50% = bán kính ngang 100px cộng bán kính dọc 50px = hình elip.

Các hình dạng thường gặp

Quy tắc “nửa chiều cao” cho nút hình viên thuốc

Nút hình viên thuốc (pill) là một hình chữ nhật có hai đầu trái và phải là những nửa hình tròn hoàn hảo. Để đạt được điều này một cách chắc chắn, hãy đặt border-radius bằng ít nhất một nửa chiều cao của phần tử. Dùng 9999px (hoặc bất kỳ giá trị rất lớn nào) đều an toàn, vì trình duyệt sẽ giới hạn bán kính theo hình học thực tế.

Tương tác với overflow

Theo mặc định, border-radius chỉ cắt nền, viền và bóng đổ của hộp. Để cắt các phần tử con (hình ảnh, phần tử lồng nhau) theo hình bo tròn, hãy thêm:

overflow: hidden;

hoặc dùng isolation: isolate + overflow: hidden để đồng thời giới hạn cả ngữ cảnh xếp chồng (stacking contexts).

Lưu ý về khả năng truy cập

Bản thân border-radius không gây vấn đề về khả năng truy cập, nhưng việc bo góc quá mức trên các phần tử tương tác (nút viên thuốc, chip) không nên làm thu nhỏ vùng chạm. Dù bo góc thế nào, hãy giữ nút có kích thước ít nhất 44×44px (theo khuyến nghị của WCAG).