⬛
CSS Border Radius Generator (Organic Shape)
Visual builder cho border-radius — đồng đều, từng góc, hoặc organic blob (8 giá trị X/Y). 8 preset đẹp, copy CSS sẵn dùng.
Mẫu sẵn
X (horizontal):
Y (vertical):
Xem trước
CSS
Border radius bo các góc của element. 1 giá trị = bo đều 4 góc. 4 giá trị = từng góc khác nhau. 8 giá trị (X/Y) = hình dạng tự do, organic.
Border Radius là gì?
CSS border-radius bo các góc của element — từ vuông sắc đến tròn xoay, hay hình organic. Cú pháp:
/* 1 giá trị: bo đều 4 góc */
border-radius: 12px;
/* 4 giá trị: TL TR BR BL (theo chiều kim đồng hồ) */
border-radius: 12px 24px 12px 24px;
/* 8 giá trị: X / Y khác nhau → tạo hình organic */
border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%; Khi nào dùng giá trị nào?
- 0px (vuông): Brutalist UI, table cell, technical interface.
- 4-8px (bo nhẹ): input, small button — modern but not too soft.
- 12-16px (bo vừa): card, modal — phổ biến nhất hiện tại.
- 24-32px (bo lớn): hero banner, feature card — friendly look.
- 9999px (pill): badge, button "Subscribe" — capsule shape.
- 50%: avatar, circle icon button.
- Organic blob: hero shape decorative, illustration — trending 2024-2026.
Tip
- Consistent radius: dùng 1-2 giá trị xuyên suốt site (vd: 8px cho input, 12px cho card). Tailwind có scale:
rounded-sm/md/lg/xl/2xl/3xl/full. - Bo trong vs ngoài: parent có padding 8px + border-radius 12px → child cần border-radius 4px (12-8) để thẳng hàng.
- Performance: border-radius miễn phí với GPU — không cần optimize.
- Organic blob bug: nếu width khác height, blob méo. Dùng
aspect-ratio: 1để giữ vuông.
Liên quan
- Box Shadow Generator — đổ bóng kết hợp với radius
- CSS Clip-path Generator — cắt hình bất kỳ
- Gradient Generator — background đẹp
- CSS Unit Converter — px ↔ rem
- Xem tất cả công cụ
Công cụ liên quan
Xem tất cả công cụ →MỚI
🔐
JWT Decoder
Decode JWT token, xem header/payload/claims với thời gian dễ đọc.
MỚI🎨
Format JSON
Format / minify / validate JSON. Sort key A-Z, custom indent, phím tắt Ctrl+Enter.
MỚI🔍
Regex Tester
Test regex realtime với highlight match. 7 mẫu sẵn cho VN (email, SĐT, CCCD, IP...).
MỚI🔑
UUID / Hash / Base64 / URL
Bundle 4 dev tool: UUID v4, SHA-256/512 hash, Base64 (URL-safe), URL encode.