Trình Tạo Border Radius CSS — Thiết Lập Góc Bo Tròn Trực Quan

Border-radius xác định độ bo tròn của các góc phần tử CSS. Trình tạo của chúng tôi cho phép thiết lập từng góc riêng lẻ và cung cấp code CSS trực tiếp.

Cú Pháp Border-radius

border-radius: 10px điều chỉnh tất cả bốn góc. border-radius: 10px 20px 10px 20px là trên-trái, trên-phải, dưới-phải, dưới-trái. border-radius: 50% tạo hình tròn (với phần tử vuông). border-radius: 50px 100px tạo hình viên thuốc.

Góc Elliptical

border-radius: 100px / 50px tạo góc elliptical — bán kính ngang 100px, bán kính dọc 50px. Điều này tạo ra hình chữ nhật có góc bo nhiều tự do thiết kế hơn border-radius chuẩn. Phổ biến cho component thẻ và section hero.

Hướng Dẫn Thiết Kế Cho Border-radius

Sự nhất quán là chìa khóa — dùng cùng border-radius cho các phần tử tương tự. Material Design của Google dùng border-radius như phương tiện thiết kế nổi bật. Nút: 4–8px cho ứng dụng nghiêm túc, 20–50px cho giao diện vui tươi. Thẻ: 8–16px cho hầu hết trường hợp.