Border Radius Generator
Design rounded corners visually — Live CSS Code, No API Key, 100% Free
Top Left16px
Top Right16px
Bottom Right16px
Bottom Left16px
↕ Vertical Radii — organic / blob shapes ke liye
Top Left ↕16px
Top Right ↕16px
Bottom Right ↕16px
Bottom Left ↕16px
Unit
Presets
CSS Code
Ye CSS kisi bhi element par lagayein — div, img, button, card, avatar...
About Border Radius Generator
Ye free online tool aapko bina code likhe CSS border-radius design karne deta hai. Har corner ka slider ghumaiye, live preview turant update hoga, aur ready-made CSS code copy kar lein. Sab kuch aapke browser mein hota hai — koi data upload nahi hota.
Ellipse (Slash) Syntax
Advanced mode mein har corner ka horizontal aur vertical radius alag set hota hai — isse organic blob shapes bante hain jo modern websites par bahut trending hain:
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
Units Guide
- px — Fixed pixel control (buttons, cards, thumbnails ke liye best)
- % — Responsive; square box par 50% = perfect circle
- em / rem — Font-size ke saath automatically scale hota hai
Pro Tips
- Pill-shaped button ke liye Pill preset dabayein (999px trick)
- 🎲 Random Blob dabate rahiye — pasand ka shape milte hi Copy kar lein
- Link off karke chaaro corners alag-alag set kar sakte hain
- Box ka size aur color bhi change karke real scenario dekh sakte hain
0 Comments