Trình tạo CSS Border Radius

Tìm hiểu thuộc tính rút gọn border-radius

Thuộc tính CSS border-radius được định nghĩa trong W3C CSS Backgrounds and Borders Module Level 3. Dạng rút gọn của nó chấp nhận tối đa bốn giá trị cho các góc tròn và tối đa tám (phân cách bằng dấu gạch chéo) cho các góc hình elip. Thứ tự góc là cố định: trên-trái, trên-phải, dưới-phải, dưới-trái, theo chiều kim đồng hồ từ trên-trái, giống như cách bạn đọc mặt đồng hồ. Đặc tả rõ ràng: «If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.»

Bốn longhand theo từng góc cho phép bạn nhắm đến một góc duy nhất mà không cần viết các góc còn lại: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Mỗi cái chấp nhận một giá trị (góc tròn) hoặc hai giá trị (x y hình elip).

Pixel, phần trăm và thủ thuật 50%

Đặc tả W3C định nghĩa cách phần trăm được giải quyết: «Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.» Điều này tạo ra một hệ quả quan trọng: border-radius: 50% tạo ra hình tròn hoàn hảo chỉ khi phần tử là hình vuông. Trên hình chữ nhật 200×100, 50% ở mỗi góc tạo ra hình elip: bán kính ngang 100px (một nửa chiều rộng) và bán kính dọc 50px (một nửa chiều cao).

Khi nào nên dùng đơn vị nào:

• Pixel (px): Góc cố định, chính xác không thay đổi theo phần tử. Tốt nhất cho button, card và các component UI nhất quán.
• Phần trăm (%): Thay đổi theo phần tử. Dùng 50% cho hình tròn hoặc elip trên các component thay đổi hình dạng.
• em / rem: Thay đổi theo kích thước font. Hữu ích cho các button có bán kính góc nên tăng theo văn bản bên trong.
• calc(): Kết hợp đơn vị, ví dụ calc(8px + 0.5em) cho base thay đổi nhẹ theo kích thước chữ.

Thủ thuật Pill

Đặt border-radius lớn hơn một nửa cạnh ngắn nhất của phần tử sẽ kẹp mỗi góc thành hình nửa vòng tròn thực sự, tạo ra hình pill bất kể chiều rộng. Quy ước là border-radius: 9999px, bất kỳ số nào đủ lớn để không có phần tử thực tế nào vượt quá. Đây là lý do .rounded-pill của Bootstrap dùng 50rem (~800px) và rounded-full của Tailwind v4 giải quyết thành calc(infinity * 1px): cả hai đều mã hóa cùng ý tưởng, rằng một số lớn hơn box đảm bảo pill trên mọi phần tử.

Góc hình elip và các hình blob hữu cơ

Dạng tám giá trị (có dấu gạch chéo) là thứ các nhà thiết kế dùng để tạo ra các hình «blob» hữu cơ, bất đối xứng đã trở nên phổ biến cho minh họa hero và nền trang trí. Mỗi góc có bán kính ngang khác nhau trước dấu gạch chéo và bán kính dọc khác nhau sau, tạo ra các đường cong không bị ràng buộc thành cung tròn.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Biến thể Logical Property cho layout RTL

CSS Logical Properties Module Level 1 giới thiệu bốn longhand logic thích ứng theo chiều viết:

• border-start-start-radius: trên-trái trong LTR tiếng Anh, trên-phải trong RTL tiếng Ả Rập / Hebrew.
• border-start-end-radius: trên-phải trong LTR, trên-trái trong RTL.
• border-end-start-radius: dưới-trái trong LTR, dưới-phải trong RTL.
• border-end-end-radius: dưới-phải trong LTR, dưới-trái trong RTL.

Hữu ích khi cùng một component phải trông đối xứng trong cả hai chiều đọc: góc «miệng» của bong bóng chat, chẳng hạn, phải luôn ở phía người nói, không phải luôn ở bên trái. Lưu ý rằng chưa có shorthand logical-property, vì vậy bạn phải viết tất cả bốn longhand riêng biệt để sử dụng góc nhận biết RTL.

Cạnh ngoài so với cạnh trong khi border dày

Bán kính áp dụng cho cạnh ngoài của border. Trình duyệt tự động tính bán kính nhỏ hơn, đồng tâm cho cạnh trong sao cho border không trông không liên tục ở góc. Hệ quả thực tế: bán kính ngoài 16px với border 2px sẽ có bán kính trong khoảng 14px, vì vậy border trông như một khung dày đều mọi phía. Đặt background-clip: padding-box nếu bạn muốn màu nền dừng ở cạnh trong của border thay vì chảy bên dưới nó.

Quy ước kích thước thực tế

Lỗi thường gặp

1. Dùng 50% trên phần tử không phải hình vuông và mong đợi hình tròn. 50% trên hình chữ nhật là hình elip. Hãy giữ phần tử hình vuông hoặc dùng border-radius: 9999px để có hình pill thực sự.
2. Quên thứ tự góc. Dạng rút gọn theo chiều kim đồng hồ từ trên-trái (TL TR BR BL). Dạng hai giá trị đặt các cặp góc chéo đối diện, điều này dễ nhớ nhầm.
3. Giá trị âm. Đặc tả định nghĩa chúng là không hợp lệ; trình duyệt lặng lẽ kẹp về không. Nếu một góc không bo tròn như mong đợi, kiểm tra xem bạn có vô tình trừ không.
4. Parent bo tròn bị rò rỉ children. Phần tử có border-radius không kẹp descendants của nó theo mặc định. Thêm overflow: hidden vào parent nếu bạn muốn children dừng ở cạnh bo tròn.
5. Thuộc tính theo từng góc trước shorthand. CSS cascade nhạy cảm với thứ tự, vì vậy border-top-left-radius theo sau bởi border-radius sẽ ghi đè giá trị theo từng góc. Đặt shorthand trước, rồi các ghi đè theo từng góc sau.
6. Kết hợp % và px vụng về. Đặt bán kính 50% ở một góc và 12px ở góc khác hiếm khi tạo ra những gì nhà thiết kế mong đợi. Giữ một đơn vị cho mỗi phần tử.
7. Bảng và border-collapse: collapse. Tài liệu tham khảo MDN rõ ràng: border-radius không áp dụng cho phần tử table hoặc inline-table khi border bị gộp. Hãy chuyển sang border-collapse: separate hoặc áp dụng bán kính cho phần tử bọc ngoài.

Các câu hỏi thường gặp khác

Tại sao ảnh của tôi không có góc bo tròn?

Nếu ảnh nằm bên trong container có border-radius nhưng các góc vẫn trông vuông, parent không kẹp. Thêm overflow: hidden vào parent. Ngoài ra, áp dụng border-radius trực tiếp vào phần tử <img>; ảnh phản hồi với thuộc tính một cách tự nhiên.

border-radius có ảnh hưởng đến hiệu suất không?

Không đáng kể. Các trình duyệt hiện đại kết xuất góc bo tròn trên GPU và chi phí về cơ bản giống hệt cạnh vuông. Ngoại lệ là hoạt động border-radius trên phần tử lớn mỗi frame (có thể kích hoạt tái tổng hợp layer), nhưng góc bo tròn tĩnh về cơ bản là miễn phí.

Điều này có hoạt động trên các trình duyệt cũ hơn không?

Có. Mọi trình duyệt kể từ IE9 đều hỗ trợ border-radius không cần tiền tố. Các biến thể logical-property (border-start-start-radius v.v.) mới hơn: Chrome 89+, Firefox 66+, Safari 15+. Đối với các trình duyệt cũ cần hành vi logic, viết một khối @supports nhỏ làm fallback.

Làm sao tôi tạo bong bóng chat?

Dùng bốn longhand theo từng góc để bo tròn ba góc và để góc thứ tư nhỏ hoặc sắc nét. Đó là «miệng» chỉ về phía người nói. Ví dụ, bong bóng tin nhắn gửi đi: border-radius: 16px 16px 4px 16px;. Để các bong bóng nhận biết RTL, chuyển sang longhand logic để miệng lật theo chiều đọc.

Tại sao các pill button của tôi trông không đều trên các chiều rộng phần tử khác nhau?

Pill kẹp mỗi góc thành một nửa cạnh ngắn nhất, là chiều cao đối với button thông thường. Vì vậy button thấp hơn có bán kính nhỏ hơn và button cao hơn có bán kính lớn hơn. Đó là hành vi mong muốn. Nếu bạn muốn bán kính không đổi trên mọi button bất kể kích thước, dùng giá trị pixel cố định (ví dụ border-radius: 24px) thay vì thủ thuật pill.

Tôi có thể sao chép CSS thẳng vào dự án Tailwind / Bootstrap không?

Có, CSS được tạo ra là cú pháp tiêu chuẩn thuần túy không có tiền xử lý hay phụ thuộc framework. Trong Tailwind v4 bạn cũng có thể viết các giá trị tùy chỉnh dưới dạng utility (rounded-[12px] hoặc rounded-[30%/70%]) nếu bạn thích giữ nguyên phong cách utility-class.