Thư viện thuật ngữ / UI/UX

Bo góc là gì?

Còn gọi: corner radius, border radius, corner radius, border radius, border-radius, bo tròn góc

Corner radius là độ bo tròn ở các góc của nút, thẻ, ô nhập, ảnh trong giao diện; trong CSS thuộc tính tương ứng là border-radius, trong Figma là Corner radius.

Hiểu kỹ hơn

Độ bo góc góp phần lớn vào cá tính thị giác: góc vuông cho cảm giác nghiêm túc, chính xác; bo nhỏ (4 đến 8 px) trung tính, hiện đại; bo lớn hoặc dạng viên thuốc cho cảm giác thân thiện, mềm mại. Nên định nghĩa vài mức bo cố định trong design system thay vì dùng tuỳ hứng. Mẹo quan trọng khi lồng phần tử: bán kính bo bên ngoài nên bằng bán kính bên trong cộng khoảng padding giữa chúng, nếu không các góc trông lệch. Ví dụ thẻ có padding 8 px chứa ảnh bo 12 px thì thẻ nên bo 20 px. Figma còn có tuỳ chọn corner smoothing tạo góc mượt giống biểu tượng iOS. Bo góc cần thống nhất giữa component cùng loại.