CSS border-radius जनरेटर

टास्क पथ / इनपुट से परिणाम तक

CSS बॉर्डर रेडियस कैसे आकारूं

1. 01

   इकाई चुनें

   इकाई को पिक्सल या प्रतिशत पर सेट करें — वर्कस्पेस पिक्सल में शुरू होता है। पिक्सल किसी भी एलिमेंट साइज़ पर स्थिर रहते हैं; प्रतिशत मान एलिमेंट के साथ स्केल होते हैं, और यही कार्बनिक, असममित आकृतियां संभव बनाता है।

2. 02

   चारों कोनों को समायोजित करें

   ऊपर बायां, ऊपर दायां, नीचे दायां और नीचे बायां घुमाएं — हर एक चुनी इकाई में 1 के चरणों में 0 से 100 तक। चारों 24 px से शुरू होते हैं, और पूर्वावलोकन कार्ड हर बदलाव पर दोबारा बनता है।

3. 03

   कोनों को जोड़ें या अलग करें

   हर कोना एक साथ बदलने के लिए सभी कोने जोड़ें चालू रखें, या हर कोने को स्वतंत्र रूप से आकार देने के लिए उसे बंद करें। वर्कस्पेस इसे टॉगल के बगल में लिखता है: जुड़े रहने पर एक कोना बदलने से चारों अपडेट होते हैं।

4. 04

   नमूना आकृति आज़माएं

   असममित संदर्भ के लिए नमूना लोड करें दबाएं: ऊपर बायां और नीचे दायां 64 px पर, ऊपर दायां और नीचे बायां 12 px पर, अलग-अलग — कार्ड और अवतारों पर इस्तेमाल होने वाली तिरछी पत्ती आकृति। रीसेट एकसमान 24 px डिफ़ॉल्ट पर लौटाता है।

5. 05

   बना डिक्लेरेशन जांचें

   आउटपुट हमेशा घड़ी की दिशा में चार मान सूचीबद्ध करता है — ऊपर-बायां, ऊपर-दायां, नीचे-दायां, नीचे-बायां — ताकि पेस्ट करने पर हर कोना स्पष्ट रहे। स्थिति बैज मान्य CSS पढ़ता है, और कोई भी रेंज से बाहर कोना उसे मान जांचें पर पलटकर कॉपी रोक देता है।

6. 06

   CSS कॉपी या डाउनलोड करें

   .rounded-card नियम को चार-मान border-radius डिक्लेरेशन के रूप में कॉपी करने के लिए CSS कॉपी करें दबाएं, या उसे toolars-border-radius.css के रूप में सहेजने के लिए .css डाउनलोड करें। वही डिक्लेरेशन इमेज, बटन, कार्ड और किसी भी दूसरे एलिमेंट पर काम करता है।