Vượt xa border-radius: Khám phá thuộc tính CSS corner-shape để nâng tầm giao diện UI hiện đại

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• corner-shape là thuộc tính CSS mới giúp tùy biến hình dạng góc của phần tử, hoạt động bổ trợ cho border-radius.
• Hỗ trợ các kiểu dáng đa dạng như: squircle (siêu elip), bevel (vát), scoop (lõm), notch (khuyết).
• Áp dụng chiến lược Progressive Enhancement (nâng cấp dần dần) để đảm bảo giao diện vẫn hiển thị tốt trên các trình duyệt cũ.

Trong suốt hơn một thập kỷ qua, chúng ta đã quá quen thuộc với border-radius như một tiêu chuẩn duy nhất để bo tròn các góc. Tuy nhiên, border-radius chỉ cung cấp một hình dạng duy nhất là đường cong tròn. Khi muốn tạo các góc vát, góc lõm hay hình dạng "squircle" (siêu elip) như trên iOS, chúng ta thường phải sử dụng các kỹ thuật phức tạp như clip-path hoặc SVG mask, vốn gây khó khăn cho việc quản lý border và đổ bóng.

Sự xuất hiện của thuộc tính CSS corner-shape chính là lời giải cho những hạn chế này.

Tìm hiểu về thuộc tính corner-shape

corner-shape không thay thế border-radius mà đóng vai trò là "người đồng hành". Thuộc tính này định nghĩa hình dạng của đường cong mà border-radius tạo ra. Nếu không có border-radius, corner-shape sẽ không có tác dụng.

Các giá trị hỗ trợ

Giá trị	Mô tả
round	Mặc định, bo tròn theo border-radius thông thường
squircle	Hình dạng siêu elip, bo tròn mượt mà kiểu Apple
bevel	Cắt vát góc bằng đường thẳng
scoop	Tạo đường cong lõm vào trong
notch	Tạo vết cắt khuyết vào trong
square	Loại bỏ hoàn toàn bo góc

Chiến lược Progressive Enhancement

Tại thời điểm tháng 3/2026, corner-shape được hỗ trợ trên Chrome 139+. Để đảm bảo trải nghiệm người dùng trên mọi trình duyệt, chúng ta nên sử dụng @supports:

@layer demo {
  @supports (corner-shape: bevel) {
    .element {
      corner-shape: squircle;
    }
  }
}

Ứng dụng thực tế trong UI

1. Thẻ sản phẩm (Product Cards)

Thay vì sử dụng clip-path phức tạp cho các dải băng (ribbon) trên thẻ sản phẩm, bạn có thể kết hợp corner-shape để tạo hình dạng ribbon tự nhiên, giúp border và shadow tuân thủ chính xác hình dạng của phần tử.

2. Hệ thống nút bấm (Buttons)

Bạn có thể tạo ra các nút bấm với phong cách độc đáo bằng cách kết hợp các giá trị khác nhau:

.btn--primary {
  corner-shape: bevel;
  transition: corner-shape 0.3s ease;
}
.btn--primary:hover {
  corner-shape: squircle;
}

Việc sử dụng corner-shape giúp các nhà phát triển thoát khỏi các kỹ thuật hack CSS cũ. Nếu bạn quan tâm đến việc tối ưu hóa hiệu năng và khả năng tương tác của CSS, hãy tham khảo thêm bài viết về Khám phá Scroll-Triggered Animations: Tương lai của hiệu ứng cuộn trang trong CSS để thấy rõ sức mạnh của CSS hiện đại.

Sơ đồ quy trình áp dụng

[Thiết kế UI] ➔ [Baseline (border-radius)] ➔ [Kiểm tra hỗ trợ @supports]
                                     │
                                     ▼
                          [Nâng cấp với corner-shape]

Kết luận

corner-shape mở ra một kỷ nguyên mới cho thiết kế giao diện trên web. Bằng cách áp dụng tư duy thiết kế theo tầng (tầng cơ bản và tầng nâng cao), chúng ta có thể mang lại trải nghiệm "premium" cho người dùng trên các trình duyệt hiện đại mà không làm hỏng giao diện trên các trình duyệt cũ. Đây chắc chắn là công cụ không thể thiếu trong bộ đồ nghề của các Frontend Developer trong tương lai.