Trình tạo border radius trực quan
Việc tạo các góc bo tròn hoàn hảo cho thành phần web không cần phải đoán mò thông số hay liên tục tải lại trang. Trình tạo border radius trực quan này cho phép bạn kéo thanh trượt và xem ngay sự thay đổi trên phần tử. Khi đã ưng ý, bạn có thể sao chép ngay đoạn mã CSS đã tối ưu vào clipboard.
Vì mọi thao tác tính toán và xem trước đều được xử lý cục bộ trên trình duyệt, công cụ này hoạt động cực nhanh và hoàn toàn bảo mật. Các thiết kế hay thao tác của bạn sẽ không bao giờ bị tải lên máy chủ.
Làm chủ bo góc trong CSS
Thuộc tính border-radius là thành phần cơ bản trong thiết kế web hiện đại, dùng để làm mềm các góc cạnh thô cứng của nút bấm, hình ảnh, modal và container. Dù trông có vẻ đơn giản, nhưng cú pháp của nó lại khá phức tạp khi bạn muốn tùy chỉnh từng góc riêng biệt.
Công cụ tạo CSS border-radius này giúp bạn hiểu và sử dụng hiệu quả cú pháp viết tắt (shorthand) trong CSS. Khi bạn liên kết tất cả các góc, công cụ sẽ xuất ra một giá trị duy nhất (ví dụ: border-radius: 16px;). Nếu bạn bỏ liên kết để tạo hình dáng tùy chỉnh, công cụ sẽ tự động định dạng mã CSS dựa trên thông số bạn nhập:
- Bốn giá trị: Nếu tất cả các góc đều khác nhau, CSS sẽ áp dụng chúng theo chiều kim đồng hồ bắt đầu từ góc trên cùng bên trái (ví dụ:
border-radius: 16px 8px 4px 2px;). - Hai giá trị: Nếu góc trên cùng bên trái giống góc dưới cùng bên phải, và góc trên cùng bên phải giống góc dưới cùng bên trái, công cụ sẽ tự động rút gọn mã thành hai giá trị (ví dụ:
border-radius: 16px 0;).
Pixel và Phần trăm
Một trong những băn khoăn phổ biến nhất khi viết CSS bo góc là chọn đúng đơn vị. Công cụ này giúp bạn dễ dàng chuyển đổi giữa pixel (px) và phần trăm (%), mỗi đơn vị phục vụ một mục đích riêng trong thiết kế UI.
Pixel (px) là đơn vị tuyệt đối. Độ bo góc 12px sẽ luôn có cùng một độ cong, cho dù được áp dụng trên một nút bấm nhỏ hay một ảnh hero lớn. Pixel là lựa chọn tiêu chuẩn cho các thành phần UI như card, menu dropdown và trường nhập liệu, vì chúng duy trì ngôn ngữ thiết kế đồng nhất và xuyên suốt toàn bộ ứng dụng. Công cụ này cho phép giá trị pixel lên đến 200px.
Phần trăm (%) là đơn vị tương đối dựa trên kích thước của chính phần tử. Độ bo góc 50% trên một phần tử hình vuông sẽ luôn tạo ra một hình tròn hoàn hảo, bất kể hình vuông đó rộng 50 pixel hay 500 pixel. Nếu phần tử là hình chữ nhật, 50% sẽ tạo ra hình elip. Đơn vị phần trăm rất lý tưởng cho các phần tử responsive như ảnh đại diện (avatar) hoặc các khối màu nền trang trí. Công cụ này giới hạn giá trị phần trăm ở mức 50%, vì các giá trị lớn hơn sẽ không làm tăng thêm độ bo tròn trong CSS.
Không chỉ là bo góc cơ bản: Trình tạo hình khối CSS
Mặc dù thường được dùng để bo góc nhẹ, border-radius còn là một trình tạo hình khối CSS mạnh mẽ. Bằng cách tùy chỉnh riêng từng góc và kết hợp các giá trị lớn, bạn có thể tạo ra các hình học độc đáo mà không cần dùng đến file SVG hay clip-path phức tạp. Công cụ này cung cấp sẵn một số mẫu để minh họa:
- Viên thuốc: Bằng cách áp dụng một giá trị pixel rất lớn (như
9999px) cho tất cả các góc, bạn sẽ tạo ra hình "viên thuốc" hoặc hình sân vận động. Hình này được dùng phổ biến cho các huy hiệu (badges), nhãn (tags) và các nút kêu gọi hành động (CTA) hiện đại. Trình duyệt sẽ giới hạn độ bo góc thực tế ở mức chính xác bằng một nửa chiều cao của phần tử, đảm bảo tạo ra các nửa hình tròn hoàn hảo ở hai đầu. - Hình tròn: Đặt tất cả các góc thành
50%sẽ biến một hình vuông thành một hình tròn hoàn hảo. - Chiếc lá: Bằng cách đặt góc trên-trái và dưới-phải thành
0, đồng thời đặt góc trên-phải và dưới-trái ở giá trị cao (như48px), bạn sẽ tạo ra một hình chiếc lá bất đối xứng và tự nhiên. - Thẻ tab: Bằng cách chỉ bo góc trên-trái và trên-phải (ví dụ:
16px) trong khi giữ nguyên các góc dưới là0, bạn sẽ tạo ra hình dáng thẻ thư mục cổ điển, rất lý tưởng cho các menu điều hướng.
Hoàn thiện các thành phần UI của bạn
Bo góc hiếm khi đứng độc lập; chúng thường là một phần của hệ thống thiết kế tổng thể và đồng nhất. Ví dụ, một thành phần card được thiết kế tốt sẽ kết hợp độ bo góc nhẹ nhàng với chiều sâu và màu sắc để nổi bật trên trang.
Sau khi tạo được độ bo góc ưng ý, bạn có thể kết hợp nó với các hiệu ứng CSS khác để hoàn thiện thiết kế. Hãy thử kết hợp hình khối mới với bóng đổ nhẹ nhàng bằng công cụ Tạo Box Shadow của chúng tôi để tạo hiệu ứng nổi, lơ lửng. Nếu bạn đang thiết kế nút bấm hoặc thành phần nền trang trí, bạn có thể áp dụng nền màu rực rỡ bằng công cụ Tạo CSS Gradient, hoặc tìm các màu đơn sắc bổ trợ hoàn hảo với công cụ Tạo bảng màu.