Công cụ tạo bo góc và hình dạng
Điều chỉnh bán kính ngang và dọc của bốn góc bằng px hoặc % rồi xem trước hình dạng. Sao chép hoặc lưu CSS border-radius được tạo. Chiều rộng, chiều cao và màu dùng để xem trước không có trong CSS.
Những gì bạn có thể làm
Điều chỉnh độ bo từ một mẫu
Chọn trong 8 mẫu, gồm góc bo tròn, hình viên nang và hình lá, rồi điều chỉnh các bán kính. Chọn một mẫu sẽ thay thế các bán kính và đơn vị.
Đặt độ bo khác nhau cho từng góc trong bốn góc
Tắt thiết lập bán kính đồng nhất để nhập riêng bán kính ngang và dọc cho các góc trên bên trái, trên bên phải, dưới bên phải và dưới bên trái.
Kiểm tra và lấy CSS
Kiểm tra hình dạng rồi tạo CSS. Chuyển đổi giữa dạng viết ngắn và khai báo cho từng góc, rồi sao chép hoặc lưu thành tệp CSS.
Cách sử dụng
Chọn mẫu và đơn vị
Nhập trực tiếp các bán kính, hoặc chọn một mẫu để bắt đầu điều chỉnh. Đổi đơn vị không làm thay đổi các con số.
So sánh độ bo và hình dạng
Nhập một giá trị để dùng cùng một bán kính. Muốn khác nhau theo góc thì bỏ chọn tùy chọn đó và điều chỉnh các giá trị ngang và dọc.
Kiểm tra kích thước nếu cần
Trong cài đặt xem trước, bạn có thể đổi chiều rộng, chiều cao và màu xem trước. Những giá trị này không được đưa vào CSS đầu ra.
Tạo CSS, rồi sao chép hoặc lưu
Nhấn “Tạo CSS” và chọn định dạng bạn muốn. Nếu đổi bán kính, đơn vị hoặc kích thước, hãy tạo lại.
Hữu ích khi
Tạo hình dạng cho góc của thẻ và nút
Khi bạn muốn tạo CSS cho các thành phần trang bằng cách bo tròn cả bốn góc đều nhau, hoặc chỉ bo hai góc trên.
Tạo nền bo tròn bất đối xứng
Khi bạn muốn đổi độ bo ngang và dọc theo từng góc để tạo đường viền giống lá hoặc hình dạng hữu cơ.
Mối liên hệ giữa bán kính, đơn vị và kích thước hiển thị
Ngang và dọc là hai chiều của cùng một góc
Bán kính ngang điều khiển độ bo theo chiều ngang, còn bán kính dọc điều khiển độ bo theo chiều dọc. Một góc sẽ không được bo nếu một trong hai giá trị bằng 0. Hãy chỉ định bốn góc theo chiều kim đồng hồ bắt đầu từ góc trên bên trái.
% dùng chiều rộng và chiều cao làm hai mốc riêng biệt
Giá trị % theo chiều ngang tương đối so với chiều rộng của phần tử, còn % theo chiều dọc tương đối so với chiều cao. Dù có cùng các con số, một hình vuông và một hình chữ nhật cao hoặc rộng sẽ trông khác nhau. px chỉ định trực tiếp một độ dài.
Bán kính quá lớn co lại theo cùng một tỷ lệ
Nếu tổng hai bán kính liền kề vượt quá độ dài cạnh, cả 8 bán kính hiển thị sẽ được giảm theo một hệ số chung. Giá trị nhập và CSS được tạo vẫn không thay đổi. Trong phần chi tiết sau khi tạo, bạn có thể kiểm tra các bán kính dùng cho phần xem trước.
Phạm vi đường viền mà góc bo tròn có thể biểu diễn
border-radius biến góc thành đường cong hình elip. Nó không thể tạo chỗ lõm hay đa giác tùy ý. Mẫu squircle xấp xỉ hình dạng bằng các góc elip; nó không tái tạo chính xác đường cong toán học.
Câu hỏi thường gặp
Tôi có thể đặt độ bo khác nhau cho từng góc không?
Có. Bỏ chọn “Dùng cùng bán kính cho mọi góc” để nhập riêng bán kính ngang và dọc của từng góc. Chọn lại sẽ đặt mọi bán kính bằng bán kính ngang của góc trên bên trái.
Các con số có được quy đổi khi tôi đổi đơn vị không?
Không. Các con số được giữ nguyên và chỉ đổi đơn vị. Nếu sau khi chuyển từ px sang % còn giá trị vượt quá 100, hãy nhập lại trong phạm vi 0–100.
Kích thước và màu trong phần xem trước có được đưa vào CSS không?
Không. Đầu ra chỉ chứa các khai báo border-radius. Hãy đặt chiều rộng, chiều cao và màu nền trong trang hoặc thành phần nơi bạn dùng nó.
Tại sao hình dạng hiển thị lại có góc bo nhỏ hơn các bán kính tôi đã nhập?
Trình duyệt giảm tỷ lệ các bán kính hiển thị theo cùng một tỷ lệ để các đường cong ở góc không bị chồng lấn. Bạn có thể kiểm tra hệ số giảm và giá trị px của từng góc trong “Bán kính dùng để hiển thị.”
Dữ liệu nhập và kết quả
- Bán kính
- Chỉ định cả 8 giá trị bằng cùng một đơn vị: 0–100% hoặc 0–9999px. Giá trị thập phân cũng được chấp nhận.
- Xem trước
- Chiều rộng và chiều cao xem trước là số nguyên từ 1–400px. Chiều rộng không vừa có thể cuộn ngang trong ô.
- Đầu ra
- Dạng viết ngắn border-radius hoặc khai báo cho từng góc trong 4 góc. Sao chép hoặc lưu border-radius.css.
- Không bao gồm
- Chiều rộng, chiều cao, màu nền, và xuất ảnh hoặc SVG.