CSS Border Radius Generator (Organic Shape)

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.