बॉर्डर रेडियस जेनरेटर — मुफ़्त ऑनलाइन

यह टूल क्या करता है

बॉर्डर रेडियस जेनरेटर से आप चार स्लाइडरों की मदद से किसी बॉक्स के हर कोने को अलग-अलग, 0 से 100 पिक्सल तक, गोल कर सकते हैं और लाइव प्रीव्यू में आकार देख सकते हैं। आउटपुट एक अकेला border-radius डिक्लेरेशन होता है, जिसे आप अपनी स्टाइलशीट में पेस्ट कर सकते हैं। चारों कोने 20px से शुरू होते हैं।

मान उसी क्रम में लिखे जाते हैं जिसकी CSS को उम्मीद होती है: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ, यानी ऊपर-बाएँ कोने से घड़ी की दिशा में। बराबर मानों से समान रूप से गोल कार्ड बनता है; अलग-अलग मानों से स्पीच बबल, टैब, पत्ती जैसे आकार और दूसरे असममित डिज़ाइन बनते हैं। यह शॉर्टहैंड हर मौजूदा ब्राउज़र में बिना प्रीफ़िक्स के काम करता है।

कब इस्तेमाल करें

• कार्ड, बटन और इनपुट फ़ील्ड को डिज़ाइन सिस्टम के कॉर्नर रेडियस के मुताबिक स्टाइल करना।
• सिर्फ़ किसी टैब के ऊपरी कोने या ड्रॉपडाउन के निचले कोने गोल करना।
• एक नुकीले कोने वाला चैट-बबल आकार बनाना।
• CSS बदलकर बार-बार रीलोड करने के बजाय अलग-अलग रेडियस जल्दी से आज़माना।

उदाहरण

इनपुट

ऊपर-बाएँ 24, ऊपर-दाएँ 24, नीचे-दाएँ 4, नीचे-बाएँ 24

आउटपुट

border-radius: 24px 24px 4px 24px;

इस टूल के बारे में सवाल