💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 2025年3月1日

Bo góc (Border Radius)

📌

Kết luận

Dùng border-radius để bo tròn các góc

📝 Mã thực tế tại đây

div { border-radius: 8px; }

Trong giao diện hiện đại, việc bo góc cho các thẻ bài (card) hay nút bấm (button) đã trở thành một tiêu chuẩn phổ biến.

Cách chỉ định giá trị

Giá trị	Hiệu quả
`8px`	Bo góc nhẹ
`50%`	Hình tròn hoàn hảo (nếu là hình vuông)
`9999px`	Hình viên thuốc (luôn bo tròn hai đầu)

- Dùng border-radius để bo góc - Dùng 50% để tạo hình tròn - Thường dùng cho card, button và ảnh đại diện (avatar)

Hãy bo góc thẻ div với bán kính 8px nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

■ Bài tập thực hành

Hãy bo góc thẻ div với bán kính 8px.

Gợi ý khi gặp khó khăn

border-radius: 8px;