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

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

चार स्लाइडर हैं, हर कोने के लिए एक, और हर एक तुरंत आउटपुट अपडेट करता है. 'सभी कोने लिंक करें' ऑन होने पर, किसी भी स्लाइडर को हिलाना बाकी तीनों में वही वैल्यू कॉपी कर देता है, इसके बाद CSS फिर से बनता है. वैल्यूज़ को उसी क्रम में जोड़ा जाता है जिस क्रम में CSS असल में इस्तेमाल करता है, ऊपर-बाएं से शुरू होकर घड़ी की दिशा में. यही स्ट्रिंग सीधे प्रीव्यू एलिमेंट की style.borderRadius प्रॉपर्टी में लिखी जाती है, यानी यह आउटपुट का अनुमान नहीं, बल्कि असल में वही CSS है जो आप कॉपी करते हैं.

यह टूल पिक्सल में काम करता है, और पिक्सल परसेंटेज से अलग व्यवहार करते हैं: एक आयत पर border-radius: 50% हर एक्सिस के लिए अलग-अलग कैलकुलेट होता है और अंडाकार आकार बनाता है, जबकि 9999px जैसी बड़ी पिक्सल वैल्यू वह 'पिल शेप' देती है जो ज़्यादातर लोग ढूंढते हैं. स्पेसिफिकेशन ओवरलैपिंग रेडियस को भी क्लैंप करता है: जब किसी साइड पर रेडियस का जोड़ उस साइड की लंबाई से ज़्यादा हो जाता है, तो ब्राउज़र उन्हें अनुपात में घटा देता है.

पूरा टूल इस पेज में चलने वाली जावास्क्रिप्ट की कुछ दर्जन लाइनें हैं. वैल्यूज़ DOM से प्रीव्यू और आउटपुट बॉक्स तक बिना किसी नेटवर्क एक्टिविटी के आती-जाती हैं, यह आप डेवलपर टूल्स के नेटवर्क टैब में देख सकते हैं.