Giới thiệu CSS Border Radius Generator
Border Radius Nâng cao (8 giá trị) là gì?
Thuộc tính border-radius thường được biết đến với công dụng bo tròn 4 góc của một hình chữ nhật bằng 1 giá trị duy nhất (Ví dụ: border-radius: 10px).
Tuy nhiên, CSS hỗ trợ cấu trúc 8 giá trị (Eight-value syntax) để tạo ra các hình dáng phi đối xứng, tự nhiên (Organic Shapes) hay hình giọt nước.
Cú pháp: border-radius: 10% 20% 30% 40% / 50% 60% 70% 80%;
- 4 giá trị đầu xác định đường cong theo trục ngang (Top-Left, Top-Right, Bottom-Right, Bottom-Left).
- Dấu
/phân tách trục. - 4 giá trị sau xác định đường cong theo trục dọc.
Ứng dụng của Organic Shapes trong thiết kế Web hiện đại
Thay vì đóng khung nội dung trong các khối vuông vức nhàm chán, việc sử dụng các hình thù biến dạng tự nhiên (Organic Shapes) giúp giao diện web trở nên thân thiện, phá cách và mang tính nghệ thuật cao hơn.
- Làm hình nền (Background Blob) chứa hình ảnh Avatar.
- Tạo nút bấm (Button) độc đáo.
- Che dấu các đường biên sắc nét của hình ảnh (Image Masking).
Hướng dẫn tạo hình thù Blob với công cụ tạo Border Radius
Việc nhẩm tính 8 giá trị phần trăm (%) là điều bất khả thi với bộ não con người. Công cụ CSS Border Radius Generator giúp bạn:
- Kéo thả 8 tay cầm (Handles) trực quan xung quanh hình chữ nhật.
- Theo dõi sự thay đổi hình dáng theo thời gian thực.
- Sao chép ngay mã CSS đã được tính toán chính xác để dán vào dự án của bạn.