CSS border radius generator किसी भी rounded shape के लिए perfect border-radius value बनाता है। ज़्यादातर designers border-radius: 8px जानते हैं, but property में 8 separate values हैं — pills, asymmetric cards, organic blobs draw करने के लिए।
इस गाइड में चारों corners, slash syntax for ellipse radii, और custom blob shapes cover करेंगे।
Border Radius CSS Generate करें — Free
Live preview, all corners, blob shapes।
Border Radius Syntax
Full syntax में 8 values: 4 horizontal radii, slash, 4 vertical radii।
border-radius: TL TR BR BL / TL TR BR BL;| Shorthand | Meaning |
|---|---|
| 10px | All four corners 10px |
| 10px 20px | TL/BR=10, TR/BL=20 |
| 10px 20px 30px 40px | TL, TR, BR, BL clockwise |
| 50% 30% / 30% 50% | Ellipse: H/V radii different |
Common Shapes
| Shape | CSS |
|---|---|
| Card | border-radius: 12px; |
| Pill | border-radius: 9999px; |
| Circle | border-radius: 50%; |
| Leaf | border-radius: 0 100% 0 100%; |
| Top-only | border-radius: 12px 12px 0 0; |
Organic Blob Shapes
Slash syntax horizontal और vertical radii decouple करता है — modern hero sections के लिए popular asymmetric blobs:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;20-80% percentages mix करें natural-looking blobs के लिए।
Percent vs Pixels
- px / rem — Fixed corner size। Buttons, cards के लिए अच्छा।
- % — Element size के साथ scale। 50% on square = circle।
- 9999px — "Fully round" pills trick।
Tips & Gotchas
- Value half-side से बड़ा हो तो browser clamp करता है।
- Image children break करें तो parent पर
overflow: hidden। - Animations के लिए
border-radiustransition करें।
How to Use the Tool (Step by Step)
- 1
Shape Mode Pick करें
Symmetric, per-corner, blob।
- 2
Sliders Drag करें
Live adjust।
- 3
Preview देखें
Real-time update।
- 4
CSS Copy करें
Generated rule।
- 5
Apply करें
किसी भी element पर।
Frequently Asked Questions
Maximum border-radius क्या है?+−
कोई भी value works; 50%+ on square = fully rounded।
क्या different corners हो सकते हैं?+−
हाँ — 4 values clockwise from top-left।
Border-radius animate कैसे करें?+−
Property transition करें: transition: border-radius 0.3s ease।
Image rounded corners से बाहर क्यों जाती है?+−
Parent पर overflow: hidden add करें।
Border-radius सब browsers में support है?+−
हाँ — 2010 से, no prefixes needed।
Border Radius CSS Generate करें — Free
Live preview, all corners, blob shapes।
Border Radius Generator खोलें ->Related Guides
CSS Gradient Generator — Beautiful Gradients Code (2026)
Linear, radial, conic gradient visually design। CSS code copy।
CSS Flexbox Generator Guide
Flexbox layouts visually build करें — direction, alignment, wrapping और gaps adjust करें।
CSS Grid Generator Guide
CSS Grid layouts visually build करें — rows, columns, gaps और named areas।