Tạo border-radius
Tạo border-radius CSS với xem trước trực quan.
Esquinas (horizontal)
border-radius: 16px;Trình tạo bo góc CSS (border-radius)
Thuộc tính CSS border-radius cho phép bo tròn các góc của bất kỳ phần tử HTML nào, từ góc bo nhẹ đến hình tròn hoàn chỉnh. Đây là một trong những thuộc tính được sử dụng nhiều nhất trong thiết kế web hiện đại, có mặt trên hầu hết mọi trang web và ứng dụng. Nút bấm, thẻ, avatar, hình ảnh và container đều hưởng lợi từ góc bo tròn giúp giao diện mềm mại và hiện đại hơn.
Trình tạo cho phép điều chỉnh từng góc riêng lẻ hoặc liên kết chúng để thay đổi tất cả cùng lúc. Cũng hỗ trợ border-radius elip (chế độ nâng cao), sử dụng cú pháp 8 giá trị để tạo hình dạng hữu cơ và bất đối xứng phức tạp. Cú pháp elip định nghĩa bán kính ngang và dọc phân tách bằng dấu "/", cho phép tạo hình giọt nước, lá và các hình hữu cơ khác không thể đạt được với bán kính đều.
Công cụ bao gồm các preset phổ biến như vuông, bo tròn, viên thuốc, lá, giọt nước và vé, có thể dùng làm điểm khởi đầu và tùy chỉnh theo ý muốn. Xem trước cập nhật theo thời gian thực và mã CSS được tạo tự động, sẵn sàng sao chép và dán vào dự án.
Câu hỏi thường gặp
Border-radius hình elip là gì?
Border-radius hình elip sử dụng cú pháp 8 giá trị: 4 giá trị đầu định nghĩa bán kính ngang và 4 giá trị cuối là bán kính dọc, phân tách bằng "/". Điều này cho phép tạo các góc với đường cong bất đối xứng, tạo ra các hình dạng hữu cơ phức tạp hơn border-radius cơ bản.
Làm thế nào để tạo hình tròn hoàn hảo?
Để tạo hình tròn hoàn hảo, đặt border-radius: 50% cho phần tử có cùng chiều rộng và chiều cao. Trong trình tạo của chúng tôi, dùng preset "Viên thuốc" (100px cho tất cả các góc) và đảm bảo phần tử là hình vuông.
Có tương thích với tất cả trình duyệt không?
Có, border-radius tương thích với tất cả các trình duyệt hiện đại từ nhiều năm nay, bao gồm Chrome, Firefox, Safari, Edge và Opera. Không cần tiền tố nhà cung cấp cho bất kỳ trình duyệt hiện tại nào.