Asymmetric Corner Designs

Mix radii across corners to create distinctive, brand-recognizable card and button shapes.

ไม่ต้องเข้าสู่ระบบ

CSS

border-radius: 20px 20px 20px 20px;

Unified (all corners equal)Elliptical (X / Y syntax)

Color:

All corners (20px)

Asymmetric tips

🎭

Disable "Unified" to get independent corner control. A common pattern: large radius on opposite corners (TL + BR), small on the others.

💡

For chat bubbles: round all corners except one (the "tail" corner). Speaker bubbles have BR rounded down to 4px; receiver bubbles have BL.

🎯

Asymmetric corners can signal directionality — e.g., a card that "points" toward a target by having only one sharp corner.

🎨

Be intentional. Random asymmetry looks like a mistake; deliberate asymmetry reinforces brand voice. Document the recipe in your design system.

ป้อนข้อมูล

Enter your data into the tool above. Everything stays local to your browser.

ประมวลผล

The tool processes your data instantly in your browser using JavaScript. No server, no waiting.

ดาวน์โหลด

Get your result instantly. Nothing is stored after you leave the page — complete privacy.

✓ฟรีสมบูรณ์ — ไม่มีค่าใช้จ่ายซ่อนเร้น ตลอดไป

✓ไม่ต้องมีบัญชี อีเมล หรือเข้าสู่ระบบ

✓ไฟล์ไม่เคยออกจากอุปกรณ์ของคุณ

✓ไม่มีขีดจำกัดขนาดไฟล์ใดๆ

✓ไม่มีลายน้ำในผลลัพธ์ใดๆ

Organic Blob Shapes

Use the elliptical X/Y syntax to create unique blo

Card and Container Corners

Standard rounded corners for cards, containers, an

Avatar & Profile Picture Shapes

Create the right corner style for profile pictures

Pills, Tags, and Badges

Build perfectly rounded pill buttons, tags, and ba