Trình tạo Border Radius CSS

CSS border-radius là thuộc tính làm tròn các góc của viền ngoài phần tử. Bạn có thể đặt từng góc độc lập bằng cách sử dụng một đến bốn giá trị.

Đặt border-radius thành 50% trên phần tử hình vuông (chiều rộng và chiều cao bằng nhau). Đối với hình elip, sử dụng border-radius: 50% trên phần tử hình chữ nhật.

Border-radius chấp nhận px, %, em, rem, vw, vh và các đơn vị độ dài CSS khác. Phần trăm tương đối so với kích thước phần tử.

Cú pháp viết tắt theo mẫu: trái-trên phải-trên phải-dưới trái-dưới. Một giá trị áp dụng cho tất cả các góc. Hai giá trị đặt trái-trên/phải-dưới và phải-trên/trái-dưới.

Có, sử dụng cú pháp dấu gạch chéo (/) bạn có thể định nghĩa bán kính ngang và dọc riêng biệt. Ví dụ: border-radius: 50% / 100px.

Border-radius hoạt động trên hầu hết phần tử HTML bao gồm div, button, img và input. Tuy nhiên, có thể không cắt nội dung tràn mà không có overflow: hidden.

Có, bằng cách kết hợp các giá trị bán kính khác nhau cho từng góc, bạn có thể tạo hình viên thuốc, hình elip, hình lá và hình hữu cơ tùy chỉnh.

Có, border-radius được hỗ trợ trong tất cả trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge và trình duyệt di động.

Đặt border-radius bằng hoặc lớn hơn một nửa chiều cao phần tử. Với nút cao 40px, sử dụng border-radius: 20px hoặc cao hơn.

Có, border-radius cắt nền, hình nền và viền của phần tử. Nền tự động theo các góc bo tròn.

Có, border-radius có thể animat bằng chuyển tiếp và animat CSS. Bạn có thể chuyển đổi mượt mà giữa các giá trị bán kính khác nhau.

Có, border-radius hoạt động tốt với các biến đổi CSS như rotate, scale và translate.

Áp dụng border-radius: 50% cho phần tử hình vuông có chiều rộng và chiều cao bằng nhau, rồi thêm thuộc tính border.

Thuộc tính riêng lẻ như border-top-left-radius cho bạn kiểm soát chính xác từng góc. Cú pháp viết tắt cho phép đặt nhiều góc trong một khai báo.