बॉर्डर रेडियस जनरेटर

यह कैसे काम करता है

border-radius तब तक सरल है जब तक आप तीन कोने गोल और एक चौकोर नहीं चाहते, जहाँ सबको चारों मानों का क्रम खोजना पड़ता है।

क्रम, हमेशा के लिए

ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ — ऊपर-बाएँ से घड़ी की दिशा में। यही घड़ी की दिशा वाला क्रम margin, padding और border के शॉर्टहैंड पर भी लागू होता है, जिसे एक बार याद कर लेना ठीक है।

पिक्सेल या प्रतिशत

पिक्सेल एलिमेंट का साइज़ चाहे जो हो, एक जैसा मोड़ देते हैं। प्रतिशत एलिमेंट की अपनी चौड़ाई और ऊँचाई के सापेक्ष होते हैं, इसलिए मोड़ स्केल होता है — और वर्ग पर 50% रेडियस से पूरा गोला बनता है, जो गोल अवतार का मानक नुस्खा है।

गोली का आकार

एलिमेंट की ऊँचाई के आधे से बड़ा रेडियस ठीक आधे तक सीमित कर दिया जाता है, इसीलिए border-radius: 999px ऊँचाई चाहे जो हो, भरोसे से गोली का आकार बनाता है। यह सही मान गिनने से ज़्यादा मज़बूत है, क्योंकि सामग्री बदलने पर भी यह काम करता रहता है।

जब नेस्टेड एलिमेंट पर कोने ग़लत दिखें

किसी गोल डिब्बे के अंदर के गोल डिब्बे को छोटा रेडियस चाहिए, उनके बीच की पैडिंग जितना घटाकर, वरना मोड़ एक ही केंद्र पर नहीं बैठेंगे। यह छोटी बारीकी है जो कार्ड को ठीक से बना हुआ दिखाती है।