मुख्य बिंदु
- 01तीन मोड — समान, कोने-दर-कोने, और दीर्घवृत्त — सरल गोल बटन से लेकर कार्बनिक blob आकार तक सब कुछ को कवर करते हैं।
- 02px, %, और rem इकाइयों को समर्थित करता है, प्रत्येक के अलग स्केलिंग व्यवहार के साथ।
- 03दीर्घवृत्त मोड प्रत्येक कोने के लिए क्षैतिज और ऊर्ध्वाधर त्रिज्या को उजागर करता है CSS के संपूर्ण border-radius सिंटैक्स के लिए।
- 04लाइव प्रीव्यू वास्तविक CSS संपत्ति का उपयोग करता है, इसलिए आप जो देखते हैं वह ठीक वही है जो आपका ब्राउज़र रेंडर करेगा।
सरल गोल कोनों से लेकर कार्बनिक Blob आकारों तक
एक चार-कोना border-radius मान याद से टाइप करना काफी आसान है — border-radius: 8px। लेकिन एक बार जब आपको प्रति कोने अलग-अलग त्रिज्या की आवश्यकता होती है, या आप CSS दीर्घवृत्त सिंटैक्स चाहते हैं कार्बनिक आकारों के लिए, तो शॉर्टहैंड जल्दी क्रिप्टिक हो जाता है। पूर्ण रूप है top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — एक विशिष्ट क्रम में आठ मान।
Handytool का border-radius जेनरेटर आपको किसी भी मोड में प्रत्येक कोने के लिए स्लाइडर को खींचने देता है और आकार को लाइव में अपडेट होते हुए देखें। px, %, और rem के बीच बिना पुनर्गणना के स्विच करें, और जब आप कर लें तो सही शॉर्टहैंड या लंबी-फॉर्म CSS घोषणा को कॉपी करें।
Border Radius को कैसे डिज़ाइन करें
- 01
एक मोड चुनें
समान मोड सभी चार कोनों पर एक त्रिज्या लागू करता है। प्रति-कोने मोड प्रत्येक कोने को स्वतंत्र रूप से नियंत्रित करता है। दीर्घवृत्त मोड प्रत्येक कोने के लिए एक अलग क्षैतिज और ऊर्ध्वाधर त्रिज्या जोड़ता है।
- 02
एक इकाई चुनें
पूर्ण आकार के लिए px, तत्व के आयामों के साथ स्केल करने वाले मानों के लिए %, या रूट फॉन्ट आकार से जुड़े आकार के लिए rem चुनें।
- 03
स्लाइडर को खींचें
त्रिज्या मानों को समायोजित करें और प्रीव्यू तत्व को लाइव में अपडेट होते हुए देखें। प्रति-कोने मोड के लिए, प्रत्येक कोने के स्लाइडर को स्वतंत्र रूप से खींचें।
- 04
आकार का पूर्वावलोकन करें
प्रीव्यू बॉक्स वास्तविक CSS border-radius संपत्ति को लागू करता है, इसलिए आप जो आकार देखते हैं वह है जो आपका ब्राउज़र रेंडर करेगा।
- 05
CSS को कॉपी करें
border-radius घोषणा को पकड़ने के लिए कॉपी पर क्लिक करें और इसे अपनी स्टाइलशीट में पेस्ट करें।
सामान्य आकार और प्रत्येक मोड का उपयोग कब करें
- 01गोली बटन: समान % मोड, 50% पर सेट करें — हमेशा बटन की चौड़ाई की परवाह किए बिना एक पूर्ण गोली
- 02सूक्ष्म गोलाई के साथ कार्ड: समान px मोड, 8–16px — सबसे सामान्य UI पैटर्न
- 03असममित टैग या लेबल: प्रति-कोने मोड, एक तरफ तीव्र, दूसरी तरफ गोल
- 04अवतार वृत्त: समान % मोड, 50% — छवि कंटेनर के साथ स्केल करता है
- 05कार्बनिक blob आकार: दीर्घवृत्त मोड प्रत्येक कोने के लिए अलग-अलग X/Y मानों के साथ
तत्काल प्रीव्यू, कुछ भी अपलोड नहीं
border-radius जेनरेटर पूरी तरह से client-side है। स्लाइडर, मोड स्विच, और इकाई परिवर्तन सभी सर्वर राउंडट्रिप के बिना प्रीव्यू को तुरंत अपडेट करते हैं। कोई खाता नहीं है और कोई दर सीमा नहीं है।
उपकरण सभी आधुनिक ब्राउज़रों में काम करता है। border-radius संपत्ति — दीर्घवृत्त X/Y सिंटैक्स सहित — Safari, Firefox, Edge, और Chrome के प्रत्येक evergreen संस्करण में समर्थित है, इसलिए आउटपुट vendor prefixes या fallbacks के बिना उपयोग करने के लिए सुरक्षित है।
Border-Radius जेनरेटर FAQ
border-radius के लिए px और % के बीच क्या अंतर है?
पिक्सल त्रिज्या निरपेक्ष हैं — 16px हमेशा 16px होता है। प्रतिशत त्रिज्या तत्व के आयामों के सापेक्ष हैं, इसलिए 50% एक वर्ग बॉक्स पर एक परिपूर्ण वृत्त बनाता है और एक आयत पर एक दीर्घवृत्त।
मुझे दीर्घवृत्त मोड का उपयोग कब करना चाहिए?
दीर्घवृत्त मोड का उपयोग तब करें जब आप चाहते हैं कि एक कोना एक अक्ष पर अधिक फूला हुआ हो — एक क्षैतिज गोली के लिए, एक पत्ती आकार, या एक कार्बनिक blob के लिए। CSS इसे border-radius शॉर्टहैंड में X-radii / Y-radii के रूप में व्यक्त करता है।
एक गैर-वर्ग बॉक्स पर मेरी प्रतिशत त्रिज्या गलत क्यों दिखती है?
क्षैतिज प्रतिशत तत्व की चौड़ाई के सापेक्ष हैं; ऊर्ध्वाधर प्रतिशत इसकी ऊंचाई के सापेक्ष। एक विस्तृत, कम तत्व पर कोने गोलाकार चाप के बजाय दीर्घवृत्त में फैलते हैं।
क्या आउटपुट हर ब्राउज़र में काम करता है?
हां — border-radius दीर्घवृत्त सिंटैक्स सहित हर आधुनिक ब्राउज़र में समर्थित है: Safari, Firefox, Edge, और Chrome के सभी evergreen संस्करण। कोई vendor prefixes की जरूरत नहीं।
मैं border-radius के साथ एक परिपूर्ण वृत्त कैसे बनाऊं?
एक वर्ग तत्व पर प्रतिशत मोड में सभी कोनों को 50% पर सेट करें। तत्व को समान चौड़ाई और ऊंचाई की भी आवश्यकता है — यदि आकार गतिशील है तो aspect-ratio: 1 / 1 का उपयोग करें।