Trình tạo CSS Border Radius
Thiết kế trực quan border-radius CSS với xem trước trực tiếp và sao chép mã sẵn sàng cho sản xuất.
border-radius: —;
Riêng tư 100% — mọi thứ chạy trong trình duyệt của bạn. Không có gì được tải lên.
Giới thiệu về Trình tạo CSS Border Radius
CSS Border Radius Generator tạo ra mọi thứ từ thẻ bo góc mềm mại đến các hình dạng blob hữu cơ. Kéo các tay cầm ở góc trực tiếp trên bản xem trước, hoặc thiết lập từng góc theo số — bao gồm cú pháp đầy đủ tám giá trị, nơi mỗi góc có bán kính ngang và dọc riêng biệt. Chính trục thứ hai đó mở khóa các hình quả trứng, chiếc lá, giọt nước và blob.
Nút chuyển link-corners giữ cả bốn góc đồng bộ để bo tròn đồng nhất kinh điển, trong khi tách liên kết giải phóng từng góc cho các hình dạng bất đối xứng. Mười hai preset — rounded, pill, circle, squircle, hai kiểu blob, leaf, egg, arch, teardrop, petal và wave — minh họa những gì thuộc tính này có thể làm, và một nút ngẫu nhiên hóa sinh ra các hình dạng hữu cơ mới liên tục.
Bạn có thể thay đổi đơn vị, đổi màu phần tử và khung nền để khớp với thiết kế của mình, và sao chép giá trị border-radius thuần túy hoặc một quy tắc CSS đầy đủ. Công cụ này chạy 100% phía trình duyệt — không có gì được tải lên.
Cách sử dụng Trình tạo CSS Border Radius
- Kéo các tay cầm ở góc trên bản xem trước, hoặc tắt "Liên kết tất cả các góc" để chỉnh từng góc riêng.
- Đặt bán kính ngang và dọc cho từng góc để tạo hình dạng hữu cơ giống blob.
- Chọn đơn vị và điều chỉnh màu phần tử cùng màu nền để xem trước trong ngữ cảnh thực.
- Thử các preset — pill, squircle, blob, leaf, teardrop và hơn thế — hoặc nhấn ngẫu nhiên hóa.
- Sao chép giá trị border-radius hoặc toàn bộ CSS.