Border Radius là gì?

Border Radius là độ bo tròn của các góc trên một phần tử (như nút bấm, khung nhập liệu, hình ảnh hoặc thẻ card).

Khái niệm cơ bản

• Là thông số đo bằng pixel (px) hoặc phần trăm (%) để làm cong các góc vuông sắc nhọn của một khối hình chữ nhật.
• Giá trị càng lớn thì góc bo càng tròn; nếu đặt giá trị bằng 50% (trên một khối vuông), nó sẽ tạo thành hình tròn hoàn hảo.

• Tạo cảm giác thân thiện: Các góc bo tròn mang lại cảm giác mềm mại, dễ chịu và hiện đại hơn so với các góc vuông cứng nhắc.
• Định hướng thị giác: Giúp phân tách các thành phần (như card, button, popup modal) rõ ràng và nổi bật hơn trên giao diện.
• Tính đồng bộ: Các nhà thiết kế thường xây dựng một hệ thống Border Radius System

Ví dụ: 4px cho ô input, 8px cho nút bấm, 16px cho thẻ card) để giữ giao diện nhất quán.