Về công cụ này
Góc bo tròn định hình cảm giác của giao diện, và border-radius làm được nhiều hơn một giá trị đồng đều. Bộ tạo này cho bạn bo từng góc riêng, và dùng cú pháp tám giá trị ngang/dọc đầy đủ để tạo những hình “blob” mềm mại, hữu cơ, chẳng giống một hình chữ nhật thường chút nào.
Kéo các thanh trượt, xem hình cập nhật trực tiếp, và copy CSS border-radius. Tất cả chạy trong trình duyệt.
Câu hỏi thường gặp
Chế độ liên kết (linked) và chỉnh từng góc khác nhau thế nào?
Chế độ liên kết áp dụng cùng một bán kính (px) cho cả bốn góc; bỏ chọn nó sẽ chuyển sang chế độ chỉnh từng góc, nơi bạn đặt phần trăm ngang và dọc riêng cho từng góc.
Tôi có thể tạo góc bo hình elip (không tròn đều) không?
Có. Chuyển sang chế độ chỉnh từng góc và đặt phần trăm ngang, dọc khác nhau — border-radius trong CSS hỗ trợ hai bán kính cho mỗi góc, và công cụ này cho phép chỉnh cả hai.
Làm sao để tạo hình tròn hoàn hảo hoặc dạng viên thuốc (pill)?
Để có hình tròn, đặt bán kính đồng nhất bằng 50% chiều rộng/cao của phần tử (hoặc dùng chế độ từng góc ở mức 50%/50%); để có dạng viên thuốc, đặt bán kính bằng ít nhất một nửa chiều cao của phần tử.
Thiết kế của tôi có được tải lên đâu không?
Không. Ô xem trước và CSS được tạo ra chỉ được tính toán cục bộ ngay trong trình duyệt của bạn.
Vì sao đôi khi CSS xuất ra có dấu gạch chéo (/)?
Dấu gạch chéo dùng để tách bán kính ngang và dọc (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — điều này chỉ xuất hiện ở chế độ chỉnh từng góc, vì chế độ liên kết chỉ cần một giá trị.