⬛

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.

Tất cả công cụ Browser-only

Mẫu sẵn

Chế độ

Đồng đều (1 giá trị) Chỉnh từng góc Hình hữu cơ (8 giá trị)

Bán kính: 12px

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.