Tạo bo góc
Tạo thuộc tính CSS border-radius
Dữ liệu đầu vào và tùy chọn
Mẫu có sẵn và ví dụ
Chạy ngay trong trình duyệt. Dữ liệu bạn nhập vẫn ở trên thiết bị này.
Kết quả
Nhập các giá trị của bạn để xem kết quả.
Giới thiệu công cụ Tạo bo góc
Công cụ tạo bo góc CSS miễn phí của chúng tôi cho bạn toàn quyền điều khiển trực quan các góc bo tròn của mọi phần tử HTML. Chỉnh từng góc riêng biệt hoặc liên kết cả bốn góc, chọn nhiều đơn vị (px, %, em, rem) và xem kết quả ngay trong bảng xem trước trực tiếp.
Góc bo tròn là một phần cơ bản của thiết kế web hiện đại. Từ độ bo nhẹ 4px trên thẻ và ô nhập liệu đến hình tròn 50% cho ảnh đại diện, thuộc tính border-radius định hình cách người dùng cảm nhận giao diện của bạn. Công cụ này giúp bạn tìm đúng giá trị cần dùng một cách dễ dàng, không cần đoán mò hay liên tục tải lại trình duyệt.
Công cụ có 10 hình dạng đặt sẵn như Vuông, Tròn, Viên thuốc, Giọt nước và Hữu cơ, cùng chức năng tạo ngẫu nhiên để khám phá ý tưởng. Kết quả được xuất ở nhiều định dạng, gồm CSS viết gọn, các thuộc tính riêng cho từng góc, một lớp CSS dùng ngay và giá trị tương đương gần đúng trong Tailwind CSS.
Tính năng chính
- Điều khiển độc lập từng góc: trên trái, trên phải, dưới phải và dưới trái
- Nút liên kết các góc để chỉnh đồng đều bán kính của cả bốn góc
- Bốn tùy chọn đơn vị: pixel (px), phần trăm (%), em và rem cho thiết kế responsive
- Xem trước theo thời gian thực với kích thước phần tử điều chỉnh được (100-300px) và bộ chọn màu tùy chỉnh
- 10 hình dạng đặt sẵn: Vuông, Bo tròn, Tròn, Viên thuốc, Bo phần trên, Bo phần dưới, Bo bên trái, Bo bên phải, Giọt nước và Hữu cơ
- Chỉ báo trực quan hiển thị chính xác bán kính tại từng góc
- Tạo bán kính ngẫu nhiên để lấy cảm hứng và thử nghiệm
- Nhiều định dạng đầu ra CSS: viết gọn, thuộc tính riêng, lớp CSS và giá trị gần đúng trong Tailwind CSS
- Sao chép vào clipboard chỉ với một cú nhấp để dùng ngay trong dự án của bạn
- Thanh trượt kèm hiển thị phạm vi giúp chỉnh giá trị trực quan
Cách sử dụng công cụ Tạo bo góc
- Chọn đơn vị: Chọn px cho kích thước cố định, % cho co giãn responsive, hoặc em/rem cho kích thước theo cỡ chữ.
- Chỉnh giá trị các góc: Dùng thanh trượt để đặt bán kính riêng cho từng góc, hoặc bật “Liên kết tất cả các góc” để bo đồng đều.
- Thử các hình dạng đặt sẵn: Nhấp vào bất kỳ hình nào trong 10 hình đặt sẵn như Tròn, Viên thuốc hoặc Giọt nước để áp dụng ngay các cấu hình phổ biến.
- Xem trước kết quả: Xem bản xem trước trực tiếp với kích thước và màu sắc điều chỉnh được để biết chính xác border radius của bạn sẽ trông như thế nào.
- Sao chép CSS: Nhấp Sao chép để lấy mã CSS border-radius, hoặc dùng phần định dạng thay thế để lấy từng thuộc tính riêng hoặc lớp Tailwind.
Trường hợp sử dụng
- Tạo kiểu cho nút: Tạo nút hình viên thuốc, nút kêu gọi hành động bo nhẹ hoặc nút biểu tượng hình tròn hoàn toàn.
- Thành phần thẻ: Áp dụng góc bo đồng nhất cho thẻ, modal và hộp thoại trong hệ thống thiết kế của bạn.
- Ảnh đại diện: Dùng border-radius 50% trên ảnh vuông để tạo ảnh đại diện và ảnh hồ sơ hình tròn hoàn hảo.
- Ô nhập liệu: Thêm độ bo nhẹ cho ô nhập biểu mẫu, textarea và menu thả xuống để có giao diện hiện đại.
- Thành phần điều hướng: Tạo kiểu cho tab, huy hiệu, thẻ gắn nhãn và mục điều hướng với độ bo góc phù hợp.
- Hình dạng sáng tạo: Kết hợp các giá trị góc bất đối xứng để tạo hình khối hữu cơ, giọt nước và các yếu tố trang trí độc đáo.
- Thiết kế tooltip và popover: Áp dụng độ bo góc chính xác cho tooltip, popover và menu thả xuống.
- Token thiết kế responsive: Xây dựng các giá trị border-radius nhất quán trong dự án bằng đơn vị em hoặc rem.
Câu hỏi thường gặp
Công cụ này có miễn phí không?
Có, công cụ Tạo bo góc hoàn toàn miễn phí và không có hạn chế. Bạn có thể dùng bao nhiêu lần tùy thích mà không cần đăng ký hay thanh toán.
Dữ liệu của tôi có an toàn không?
Có. Công cụ chạy hoàn toàn trong trình duyệt của bạn. Không có dữ liệu nào được gửi đến máy chủ, nên các thiết lập và mã CSS đã tạo vẫn riêng tư trên thiết bị của bạn.
px và % khác nhau thế nào khi dùng cho border-radius?
Giá trị pixel (px) tạo bán kính cố định bất kể kích thước phần tử. Giá trị phần trăm (%) tính theo kích thước của phần tử nên có tính responsive. Ví dụ, 50% trên phần tử vuông sẽ tạo ra hình tròn hoàn hảo.
Làm thế nào để tạo hình tròn hoàn hảo bằng CSS?
Đặt border-radius là 50% cho phần tử có chiều rộng và chiều cao bằng nhau. Hình dạng Tròn đặt sẵn trong công cụ này áp dụng đúng cấu hình đó.
Mọi trình duyệt đều hỗ trợ border-radius chứ?
Có, thuộc tính CSS border-radius được hỗ trợ đầy đủ trên mọi trình duyệt hiện đại, gồm Chrome, Firefox, Safari, Edge và Opera. Không cần tiền tố nhà cung cấp.
Mẹo và thực hành tốt nhất
- Dùng giá trị nhất quán: Đặt 2-3 giá trị border-radius tiêu chuẩn trong hệ thống thiết kế của bạn (ví dụ: 4px, 8px, 16px) để giao diện đồng nhất.
- Dùng phần trăm cho hình tròn: Đặt 50% cho phần tử vuông để có hình tròn hoàn hảo tự co giãn khi kích thước thay đổi.
- Giữ độ bo nhẹ cho biểu mẫu: Giá trị nhỏ (2-8px) phù hợp nhất cho ô nhập liệu và thành phần biểu mẫu để giữ vẻ gọn gàng, chuyên nghiệp.
- Thử các góc bất đối xứng: Giá trị khác nhau ở mỗi góc tạo ra những hình dạng độc đáo, thêm cá tính cho các yếu tố trang trí.
- Cân nhắc đơn vị responsive: Dùng em hoặc rem để giá trị border-radius co giãn tỷ lệ theo cỡ chữ của bạn.
- Thử với nội dung thật: Luôn kiểm tra góc bo trông thế nào với nội dung thực tế bên trong phần tử, đặc biệt ở các kích thước khung hiển thị khác nhau.