Trình tạo Border Radius
Tạo và xem trước các thuộc tính CSS border-radius một cách trực quan.
CSS đã tạo
Điều chỉnh độ tròn của mỗi góc
Xem trước
Xem trước hiệu ứng border-radius đã tạo
Xem trước
CSS đã tạo
border-radius: 20px;Ví dụ
Nhấp vào các kiểu border-radius được xác định trước để áp dụng chúng
Thuộc tính Border Radius
Thứ tự thuộc tính
Thuộc tính border-radius áp dụng theo chiều kim đồng hồ: trên cùng bên trái → trên cùng bên phải → dưới cùng bên phải → dưới cùng bên trái
Thuộc tính viết tắt
- •
border-radius: 10px;- Áp dụng cho cả bốn góc - •
border-radius: 10px 20px;- Đầu tiên áp dụng cho trên cùng bên trái và dưới cùng bên phải, thứ hai cho trên cùng bên phải và dưới cùng bên trái - •
border-radius: 10px 20px 30px;- Đầu tiên áp dụng cho trên cùng bên trái, thứ hai cho trên cùng bên phải và dưới cùng bên trái, thứ ba cho dưới cùng bên phải - •
border-radius: 10px 20px 30px 40px;- Áp dụng cho trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải và dưới cùng bên trái theo thứ tự
Mẹo sử dụng
- • Sử dụng 50% để tạo một hình tròn hoàn hảo
- • 4-8px thường tốt cho các nút
- • 8-16px phổ biến cho các thẻ và bảng điều khiển
- • Bán kính không đối xứng có thể tạo ra các hiệu ứng thiết kế độc đáo