Border Radius जनरेटर

border-radius Shorthand को समझना

CSS border-radius property W3C CSS Backgrounds and Borders Module Level 3 में defined है। इसका shorthand circular corners के लिए चार तक values और elliptical corners के लिए आठ तक (slash से separated) accept करता है। Corner order fixed है: top-left, top-right, bottom-right, bottom-left, top-left से clockwise, ठीक वैसे जैसे आप clock face पढ़ते हैं। Spec unambiguous है: «If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.»

चार per-corner longhands आपको बाकी लिखे बिना एक corner target करने देते हैं: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius। प्रत्येक एक value (circular corner) या दो values (elliptical x y) accept करता है।

Pixels, Percentages, और 50% Trick

W3C spec define करता है कि percentages कैसे resolve होती हैं: «Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.» इससे एक important consequence निकलती है: border-radius: 50% केवल तभी perfect circle बनाता है जब element square हो। 200×100 rectangle पर, हर corner पर 50% एक ellipse produce करता है: 100px horizontal radius (चौड़ाई का आधा) और 50px vertical radius (ऊंचाई का आधा)।

कौन सी unit कब use करें:

• Pixels (px): Precise, fixed corners जो element के साथ scale नहीं होते। Buttons, cards, और consistent UI components के लिए best।
• Percentages (%): Element के साथ scale होते हैं। Shape-shifting components पर circles या ellipses के लिए 50% use करें।
• em / rem: Font size के साथ scale होते हैं। उन buttons के लिए useful जिनका corner radius अंदर के text के साथ grow करना चाहिए।
• calc(): Units mix करें, जैसे calc(8px + 0.5em) एक base के लिए जो text size के साथ subtly scale होती है।

Pill Trick

Element के shortest side के आधे से बड़ा border-radius set करने पर हर corner एक true semicircle तक clamp हो जाता है, width चाहे जो हो pill shape produce होती है। Convention है border-radius: 9999px, कोई भी इतना बड़ा number कि कोई realistic element उसे कभी exceed न करे। यही कारण है कि Bootstrap का .rounded-pill 50rem (~800px) use करता है और Tailwind v4 का rounded-full calc(infinity * 1px) resolve होता है: दोनों same idea encode करते हैं, कि box से बड़ा number किसी भी element पर pill की guarantee देता है।

Elliptical Corners और Organic Blob Shapes

Eight-value (slashed) form वह है जो designers organic, asymmetric «blob» shapes बनाने के लिए use करते हैं जो hero illustrations और decorative backgrounds के लिए popular हो गई हैं। हर corner को slash से पहले different horizontal radius और slash के बाद different vertical radius मिलता है, ऐसे curves produce होते हैं जो circular arcs तक constrained नहीं होते।

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

RTL Layouts के लिए Logical-Property Variants

CSS Logical Properties Module Level 1 चार logical longhands introduce करता है जो writing direction के अनुसार adapt होते हैं:

• border-start-start-radius: LTR English में top-left, RTL Arabic / Hebrew में top-right।
• border-start-end-radius: LTR में top-right, RTL में top-left।
• border-end-start-radius: LTR में bottom-left, RTL में bottom-right।
• border-end-end-radius: LTR में bottom-right, RTL में bottom-left।

Useful तब है जब same component दोनों reading directions में symmetric दिखना चाहिए: एक chat bubble का «mouth» corner, उदाहरण के लिए, हमेशा speaker की side पर होना चाहिए, हमेशा left पर नहीं। ध्यान रखें कि अभी तक कोई logical-property shorthand नहीं है, इसलिए RTL-aware corners opt करने के लिए चारों longhands separately लिखने होते हैं।

Border Thick होने पर Outer vs Inner Edge

Radius border के outer edge पर apply होता है। Browser inner edge के लिए automatically एक smaller, concentric radius compute करता है ताकि border corner पर discontinuous न दिखे। Practical consequence: 2px border के साथ 16px outer radius का inner radius लगभग 14px होगा, इसलिए border हर तरफ constant thickness के frame जैसा दिखता है। background-clip: padding-box set करें यदि आप चाहते हैं कि background colour border के inner edge पर रुके, उसके नीचे bleeding होने की बजाय।

व्यावहारिक Sizing Conventions

सामान्य गलतियाँ

1. Non-square element पर 50% use करके circle expect करना। Rectangle पर 50% एक ellipse है। या तो element को square रखें या true pill के लिए border-radius: 9999px use करें।
2. Corner order भूलना। Shorthand top-left से clockwise है (TL TR BR BL)। Two-value form diagonally opposite pairs set करता है, जिसे याद रखना आसान नहीं।
3. Negative values। Spec इन्हें invalid define करता है; browser चुपचाप zero पर clamp करता है। यदि corner expected तरह से round नहीं हो रहा, check करें कि आपने accidentally subtract तो नहीं किया।
4. Rounded parents से children leak होना। border-radius वाला element default में अपने descendants clip नहीं करता। यदि आप चाहते हैं कि children rounded edge पर रुकें तो parent पर overflow: hidden add करें।
5. Shorthand से पहले per-corner properties। CSS cascade order-sensitive है, इसलिए border-top-left-radius के बाद border-radius per-corner value को overwrite कर देता है। Shorthand पहले रखें, फिर per-corner overrides।
6. % और px को awkwardly mix करना। एक corner पर 50% radius और दूसरे पर 12px set करना rarely वह produce करता है जो designers expect करते हैं। एक element पर एक ही unit में रहें।
7. Tables और border-collapse: collapse। MDN reference explicit है: collapsed borders होने पर border-radius table या inline-table elements पर apply नहीं होता। या तो border-collapse: separate पर switch करें या radius को wrapping element पर apply करें।

अधिक Frequently Asked Questions

मेरी image को rounded corners क्यों नहीं मिल रहे?

यदि image border-radius वाले container के अंदर है लेकिन corners अभी भी square दिखते हैं, parent clip नहीं कर रहा। Parent में overflow: hidden add करें। Alternatively, border-radius directly <img> element पर apply करें; images property के लिए natively respond करती हैं।

border-radius performance को affect करता है?

नाममात्र। Modern browsers rounded corners GPU पर render करते हैं और cost essentially square edge के identical है। Exception है large element पर हर frame पर border-radius animate करना (यह layer recompositing trigger कर सकता है), लेकिन static rounded corners effectively free हैं।

क्या यह older browsers में काम करेगा?

हां। IE9 से हर browser border-radius को unprefixed support करता है। Logical-property variants (border-start-start-radius आदि) newer हैं: Chrome 89+, Firefox 66+, Safari 15+। Older browsers के लिए जिन्हें logical behaviour चाहिए, fallback के रूप में एक small @supports block लिखें।

Chat bubble कैसे बनाएं?

तीन corners round करने और चौथे को small या sharp रखने के लिए चार per-corner longhands use करें। यही speaker की तरफ pointing «mouth» है। उदाहरण के लिए, outgoing-message bubble: border-radius: 16px 16px 4px 16px;। RTL-aware bubbles के लिए, logical longhands पर switch करें ताकि mouth reading direction के साथ flip करे।

मेरे pill buttons अलग-अलग element widths पर uneven क्यों दिखते हैं?

Pill हर corner को shortest side के आधे तक clamp करता है, जो typical button के लिए height है। इसलिए shorter buttons को smaller radii मिलते हैं और taller buttons को larger। यह desired behaviour है। यदि आप size के बावजूद हर button पर constant radius चाहते हैं, pill trick की बजाय fixed pixel value (जैसे border-radius: 24px) use करें।

क्या मैं CSS सीधे Tailwind / Bootstrap projects में copy कर सकता हूं?

हां, generated CSS बिना किसी preprocessor या framework dependency के plain standard syntax है। Tailwind v4 में आप arbitrary values को utilities के रूप में भी लिख सकते हैं (rounded-[12px] या rounded-[30%/70%]) यदि आप utility-class style में रहना prefer करते हैं।