Tạo bo góc CSS: cú pháp border-radius, đơn vị và quy tắc trình duyệt tự co bán kính
Công cụ kéo thanh trượt cho bốn góc rồi trả về đúng dòng border-radius để dán vào CSS. Bạn chọn đơn vị pixel hoặc phần trăm, bật liên kết bốn góc khi cần bo đều, hoặc bấm một trong sáu hình dựng sẵn để bắt đầu nhanh. Khung xem trước cập nhật ngay theo từng nấc trượt nên bạn thấy hình dạng thật trước khi chép mã.
Tính năng nổi bật
- Bốn thanh trượt riêng cho góc trên trái, trên phải, dưới trái và dưới phải
- Công tắc liên kết bốn góc để một thanh trượt điều khiển cả bốn cùng lúc
- Chọn đơn vị pixel hoặc phần trăm, thang trượt tự đổi theo: 0 đến 100 với pixel, 0 đến 50 với phần trăm
- Sáu hình dựng sẵn: Rounded, Pill, Blob 1, Blob 2, Ticket và Drop, bấm một cái là áp dụng ngay
- Khung xem trước hình vuông 192 pixel đổi hình dạng theo từng nấc trượt
- Dòng mã CSS rút gọn còn một giá trị khi cả bốn góc bằng nhau, tránh viết thừa
- Nút sao chép nguyên dòng khai báo, dán thẳng được vào tệp CSS
- Chạy hoàn toàn trong trình duyệt, không gửi gì lên máy chủ và không cần mạng sau khi tải trang
Vì sao chỉnh bo góc bằng thanh trượt nhanh hơn sửa trong tệp CSS
Bo góc là thứ phải nhìn mới quyết được. Cùng một giá trị 12 pixel, đặt trên nút cao 36 pixel thì trông vừa phải, đặt trên thẻ ảnh cao 300 pixel thì gần như không thấy bo. Nếu bạn sửa trong tệp CSS thì mỗi lần đổi một con số là một vòng lưu, chờ tải lại, cuộn xuống đúng chỗ để nhìn, và sau mười vòng như vậy bạn quên mất giá trị nào vừa thử. Ở đây bốn góc nằm trên bốn thanh trượt cạnh khung xem trước, kéo tới đâu thấy tới đó, nên việc chọn con số thành chuyện vài giây. Điểm dễ bỏ sót là thứ tự bốn góc trong cú pháp rút gọn: nhiều người nhớ nhầm nên viết ra hình lộn ngược so với ý định. Công cụ ghép chuỗi theo đúng thứ tự chuẩn nên bạn không phải nhớ, chỉ cần nhìn kết quả và chép.
Lợi ích khi sử dụng
- Nhìn thấy hình dạng ngay thay vì đoán con số rồi tải lại trang
- Không phải nhớ thứ tự bốn góc trong cú pháp rút gọn
- Mã xuất ra tự rút gọn khi bốn góc bằng nhau nên tệp CSS gọn hơn
- Sáu hình dựng sẵn cho biết ngay khoảng giá trị nào tạo ra hình gì
- Thử được nhanh cả hai đơn vị để chọn cách co giãn phù hợp với bố cục
Cách tạo bo góc và lấy mã CSS
- 1Chọn đơn vị pixel hoặc phần trăm trước, vì đổi đơn vị sẽ đổi luôn khoảng giá trị của thanh trượt.
- 2Bật công tắc liên kết nếu bạn muốn bốn góc bằng nhau, tắt đi khi cần bo lệch từng góc.
- 3Kéo từng thanh trượt và quan sát khung xem trước cho tới khi hình dạng đúng ý.
- 4Hoặc bấm một trong sáu hình dựng sẵn để lấy điểm khởi đầu rồi tinh chỉnh lại từng góc.
- 5Bấm nút sao chép để lấy dòng khai báo, dán vào tệp CSS và kiểm tra lại trên đúng kích thước phần tử thật.
Cú pháp border-radius nhận từ một tới bốn giá trị
Viết một giá trị thì cả bốn góc bằng nhau, ví dụ border-radius: 12px. Viết hai giá trị thì giá trị đầu áp cho góc trên trái và góc dưới phải, giá trị sau áp cho góc trên phải và góc dưới trái. Viết ba giá trị thì lần lượt là góc trên trái, cặp góc trên phải cùng dưới trái, rồi góc dưới phải. Viết bốn giá trị thì đi theo chiều kim đồng hồ bắt đầu từ góc trên trái: trên trái, trên phải, dưới phải, dưới trái. Công cụ này xuất dạng một giá trị khi bốn góc bằng nhau và dạng bốn giá trị trong các trường hợp còn lại, nên bạn luôn đọc được đúng góc nào ứng với số nào. Ngoài ra còn dạng viết có dấu gạch chéo, ví dụ border-radius: 50px / 20px, khi đó phần trước gạch chéo là bán kính ngang và phần sau là bán kính dọc, cho ra góc bo hình ê-líp thay vì cung tròn. Dạng gạch chéo nằm ngoài phạm vi công cụ này, muốn dùng bạn viết tay trực tiếp trong CSS.
Pixel hay phần trăm: hai cách co giãn hoàn toàn khác nhau
Giá trị theo pixel là số tuyệt đối, không đổi dù phần tử to hay nhỏ. Đây là lựa chọn đúng cho nút bấm, ô nhập, thẻ nội dung, hộp thoại, vì bạn muốn mọi thành phần trong giao diện có cùng độ cong. Giá trị theo phần trăm thì tính theo kích thước của chính phần tử, và điều quan trọng ít người để ý là bán kính ngang tính theo chiều rộng còn bán kính dọc tính theo chiều cao. Vì vậy border-radius: 50% trên một hộp vuông cho ra hình tròn hoàn hảo, nhưng trên một hộp chữ nhật lại cho ra hình ê-líp chứ không phải hình tròn hai đầu bo. Thanh trượt phần trăm trong công cụ dừng ở 50 vì vượt qua mốc đó không tạo thêm hình dạng mới: khi tổng bán kính hai đầu một cạnh vượt chiều dài cạnh, trình duyệt sẽ tự co lại theo tỷ lệ. Với ảnh đại diện tròn, cách phổ biến là đặt tỷ lệ khung hình bằng một rồi dùng 50 phần trăm; với nút hình viên thuốc, cách phổ biến là dùng một con số pixel rất lớn.
Vì sao đặt số rất lớn vẫn không làm hình méo
Đây là quy tắc trong đặc tả CSS mà rất nhiều người viết giao diện dùng hằng ngày nhưng không biết tên. Với mỗi cạnh của hộp, trình duyệt cộng hai bán kính ở hai đầu cạnh đó rồi so với chiều dài cạnh. Nếu tổng lớn hơn chiều dài cạnh, trình duyệt tính một hệ số co bằng tỷ lệ nhỏ nhất giữa chiều dài cạnh và tổng bán kính trên cạnh đó, rồi nhân hệ số này vào tất cả tám bán kính của hộp để hình không bị chồng lấn. Hệ quả thực tế là hình dựng sẵn Pill trong công cụ đặt 100 pixel cho cả bốn góc, nhưng khung xem trước cao 192 pixel nên tổng hai bán kính theo chiều dọc là 200, vượt 192, trình duyệt tự co xuống còn 96 mỗi góc và cho ra đúng hình viên thuốc. Đây cũng là lý do thủ thuật đặt border-radius: 9999px luôn tạo ra hai đầu bo tròn hoàn hảo cho mọi chiều cao nút, không cần biết nút cao bao nhiêu.
Bo góc lồng nhau: công thức trừ khoảng đệm
Khi bạn đặt một phần tử bo góc bên trong một phần tử bo góc khác, ví dụ một tấm ảnh bo góc nằm trong một thẻ nội dung bo góc, hai đường cong sẽ nhìn lệch nhau nếu bạn đặt cùng một giá trị. Lý do là hai cung tròn đó không đồng tâm. Quy tắc thực hành là bán kính trong bằng bán kính ngoài trừ đi khoảng cách giữa hai đường viền, tức trừ đi phần đệm. Thẻ ngoài bo 16 pixel với khoảng đệm 8 pixel thì phần tử bên trong nên bo 8 pixel, khi đó hai đường cong chạy song song và mắt thấy dễ chịu. Nếu khoảng đệm bằng hoặc lớn hơn bán kính ngoài thì phần tử bên trong nên để góc vuông. Một lỗi hay gặp khác là đặt bo góc cho thẻ cha nhưng ảnh con vẫn tràn ra ngoài vuông vức ở bốn góc; cách xử lý là thêm overflow ẩn cho thẻ cha, hoặc đặt lại bán kính cho chính tấm ảnh. Với bảng, bo góc chỉ ăn khi bạn gộp đường viền và đặt bán kính cho ô ở bốn góc bảng.
Sáu hình dựng sẵn và cách chọn thang bo góc cho cả giao diện
Rounded đặt 16 pixel cho cả bốn góc, đây là mức hay gặp nhất cho thẻ nội dung và hộp thoại. Pill đặt 100 pixel, dùng cho nhãn, thẻ đánh dấu và nút hình viên thuốc. Blob 1 đặt 30, 70, 70, 30 và Blob 2 đặt 60, 40, 30, 70, hai hình lệch dùng cho khối trang trí ở nền chứ không nên dùng cho thành phần tương tác. Ticket đặt 8, 8, 32, 32, hai góc dưới cong hơn hai góc trên, hợp với khối phiếu giảm giá. Drop đặt 50, 50, 0, 50, một góc để vuông tạo hình giọt nước, hay dùng cho bóng thoại. Ở mức cả dự án, nên định nghĩa sẵn một thang giá trị rồi dùng lại, thay vì mỗi chỗ một con số. Ví dụ trong Tailwind CSS phiên bản 3, thang này là 2, 4, 6, 8, 12, 16 và 24 pixel cùng một mức bo tròn hoàn toàn 9999 pixel. Nguyên tắc chung là phần tử càng lớn thì bán kính càng lớn, và trong một màn hình không nên có quá ba mức bo khác nhau.
Câu hỏi thường gặp (FAQ)
Thứ tự bốn giá trị trong border-radius là gì?
Đi theo chiều kim đồng hồ bắt đầu từ góc trên bên trái: trên trái, trên phải, dưới phải, dưới trái. Đây là chỗ hay nhớ nhầm nhất, nhiều người tưởng thứ tự là trên trái, trên phải, dưới trái, dưới phải rồi ra hình lộn ngược. Công cụ ghép chuỗi theo đúng thứ tự chuẩn nên bạn chỉ cần nhìn khung xem trước.
Khi nào nên dùng phần trăm thay cho pixel?
Dùng phần trăm khi bạn muốn độ cong co giãn theo kích thước phần tử, điển hình là ảnh đại diện tròn với 50 phần trăm. Dùng pixel cho nút, ô nhập và thẻ nội dung để mọi thành phần trong giao diện có cùng độ cong. Lưu ý phần trăm tính bán kính ngang theo chiều rộng và bán kính dọc theo chiều cao.
Vì sao đặt 50 phần trăm mà hình ra ê-líp chứ không tròn?
Vì phần tử của bạn không vuông. Bán kính ngang lấy 50 phần trăm chiều rộng còn bán kính dọc lấy 50 phần trăm chiều cao, hai số khác nhau nên cung bo thành ê-líp. Muốn tròn hoàn hảo, hãy cho phần tử chiều rộng bằng chiều cao, hoặc đặt tỷ lệ khung hình bằng một rồi mới bo 50 phần trăm.
Đặt 9999px cho border-radius có gây lỗi gì không?
Không. Theo đặc tả CSS, khi tổng hai bán kính trên một cạnh vượt chiều dài cạnh, trình duyệt tự co toàn bộ bán kính theo cùng một hệ số nên hình không bao giờ méo. Nhờ vậy một con số rất lớn luôn cho ra hai đầu bo tròn hoàn hảo bất kể nút cao bao nhiêu, tiện hơn phải tính đúng một nửa chiều cao.
Vì sao hình dựng sẵn Pill đặt 100px mà xem trước không thấy đủ 100?
Khung xem trước cao 192 pixel, nên tổng hai bán kính theo chiều dọc là 200, vượt quá chiều cao. Trình duyệt tính hệ số co bằng 192 chia 200 rồi nhân vào tất cả các bán kính, kết quả mỗi góc còn 96 pixel và cho ra hình viên thuốc. Đây là hành vi đúng chuẩn chứ không phải công cụ tính sai.
Bo góc thẻ cha nhưng ảnh bên trong vẫn vuông góc, xử lý thế nào?
Bo góc của thẻ cha không tự cắt nội dung bên trong. Bạn thêm thuộc tính ẩn phần tràn cho thẻ cha để nội dung bị cắt theo đường cong, hoặc đặt bán kính trực tiếp cho tấm ảnh. Cách thứ nhất tiện hơn khi bên trong có nhiều phần tử, cách thứ hai giữ được khả năng đổ bóng cho ảnh.
Phần tử lồng nhau nên đặt bán kính bao nhiêu cho cân?
Lấy bán kính của thẻ ngoài trừ đi khoảng đệm giữa hai thẻ. Thẻ ngoài bo 16 pixel với đệm 8 pixel thì thẻ trong nên bo 8 pixel, khi đó hai đường cong chạy song song. Nếu khoảng đệm bằng hoặc lớn hơn bán kính ngoài thì thẻ trong nên để góc vuông, vì lúc đó đường cong bên trong không còn ý nghĩa thị giác.
Làm sao bo góc chỉ hai góc trên?
Tắt công tắc liên kết, kéo hai thanh trượt góc trên tới giá trị mong muốn và để hai góc dưới bằng không. Mã xuất ra sẽ có dạng bốn giá trị với hai số cuối là 0. Nếu viết tay, bạn cũng có thể dùng các thuộc tính riêng cho từng góc để mã dễ đọc hơn khi bảo trì.
Công cụ có tạo được góc bo hình ê-líp bằng cú pháp gạch chéo không?
Không, mã xuất ra chỉ có dạng một hoặc bốn giá trị. Muốn dùng bán kính ngang và bán kính dọc khác nhau, bạn viết tay theo dạng có dấu gạch chéo, ví dụ 50px / 20px, trong đó phần trước là bán kính ngang và phần sau là bán kính dọc cho cả bốn góc.
Bo góc có ảnh hưởng tới tốc độ hiển thị trang không?
Bản thân bo góc rất nhẹ và gần như không đo được. Chỗ tốn tài nguyên là khi bạn kết hợp bo góc với đổ bóng nhiều lớp, làm mờ nền phía sau hoặc hoạt ảnh liên tục trên hàng trăm phần tử. Khi cần chuyển động, hãy ưu tiên hoạt ảnh trên phép biến hình thay vì đổi bán kính từng khung hình.
Có cần thêm tiền tố nhà cung cấp cho border-radius không?
Không cần với mọi trình duyệt còn được hỗ trợ hiện nay. Các tiền tố kiểu webkit hay moz chỉ có ý nghĩa với những phiên bản trình duyệt từ hơn mười năm trước, giữ lại chỉ làm tệp CSS dài thêm. Nếu dự án của bạn vẫn phải chạy trên trình duyệt rất cũ, hãy chấp nhận góc vuông ở đó thay vì cố mô phỏng.
Nên dùng bao nhiêu mức bo góc trong một giao diện?
Nên định nghĩa sẵn một thang từ ba đến năm mức rồi dùng lại, ví dụ 4, 8, 16 và một mức bo tròn hoàn toàn. Nguyên tắc là phần tử càng lớn thì bán kính càng lớn, và trong cùng một màn hình không nên xuất hiện quá ba mức khác nhau, vì mắt người nhận ra sự thiếu nhất quán nhanh hơn bạn tưởng.
Từ khóa liên quan
- border radius generator
- tạo bo góc css online
- css border radius
- bo góc css
- border radius là gì
- cách bo góc trong css
- bo góc từng góc riêng css
- border radius phần trăm
- tạo hình tròn bằng css
- nút bo tròn css
- blob shape css
- border radius 50%
- bo góc ảnh trong css
- border radius lồng nhau
- thứ tự giá trị border radius
- border top left radius
- css rounded corners generator
- bo góc cho bảng html
- border radius 9999px
- công cụ tạo border radius miễn phí
