इमेज के किनारे गोल करें

GeekFormat के बारे में

छवि अपलोड करने के लिए क्लिक करें

JPG / PNG / WEBP

रेडियस डिफॉल्ट

रेडियस

20%

050%

आउटपुट फॉर्मेट

प्रीव्यू दिखाने के लिए इमेज अपलोड करें

किसी भी इमेज के चारों कोनों को ऑनलाइन गोल बनाएँ। प्रीसेट चुनें या स्लाइडर खींचें, रियल-टाइम में पूर्वावलोकन देखें और हर बैकग्राउंड पर फिट होने वाला पारदर्शी PNG निर्यात करें — सारी प्रक्रिया ब्राउज़र में स्थानीय रूप से होती है।

इमेज के किनारे गोल करना क्या है?

इमेज के किनारे गोल करना एक ऐसी तकनीक है जिसमें इमेज के चार समकोणों को सहज चापों से बदल दिया जाता है। यह टूल Canvas के arcTo() से गोल आयत का पथ बनाता है और फिर clip() को कॉल कर इमेज को उस क्षेत्र में कतरता है। कतरे गए क्षेत्र से बाहर का हिस्सा PNG निर्यात पर Alpha=0 पारदर्शी पिक्सेल बन जाता है।

**गोल किनारों का दृश्य प्रभाव क्या है?** गोल किनारे समकोणों की तुलना में अधिक मृदु और मित्रवत दिखते हैं, दृश्य कठोरता कम करते हैं। इन्हें ऐप आइकन्स, बटन, कार्ड और अवतार में व्यापक रूप से इस्तेमाल किया जाता है। iOS का सुपर-अंडाकार (squircle) इसे और अधिक सहज वक्रों के साथ आगे बढ़ाता है।

**कई ऐप आइकन्स को गोल किनारों की आवश्यकता क्यों होती है?** iOS, iPadOS और macOS Big Sur के बाद से सिस्टम ऐप आइकन्स पर स्वचालित रूप से गोल मास्क लगाता है, और स्रोत इमेज में सफ़ेद पृष्ठभूमि होने पर दिखने योग्य सफ़ेद किनारा बनता है। समाधान यह है कि स्रोत से पहले से एक गोल PNG निर्यात किया जाए ताकि सिस्टम दोबारा मास्क न लगाए — यही इस टूल का उद्देश्य है।

**पिक्सेल बनाम प्रतिशत:** पिक्सेल सटीक होते हैं लेकिन इमेज के बीच संरेखित करना कठिन होता है; प्रतिशत विभिन्न आकारों के अनुसार स्वतः समायोजित होते हैं। डिज़ाइन सिस्टम आमतौर पर प्रतिशत का उपयोग करते हैं, जैसे iOS ऐप आइकन्स के लिए 22,37 % और Android Adaptive Icon के लिए 25 %।

**CSS border-radius से अंतर:** CSS border-radius एक डिस्प्ले लेयर प्रभाव है, इसलिए निर्यातित इमेज के किनारे अभी भी सीधे रहते हैं। यह टूल Alpha चैनल वाला असली PNG बनाता है, जिसे CSS समर्थन न करने वाले किसी भी वातावरण (PowerPoint, वीडियो, प्रिंट) में इस्तेमाल किया जा सकता है।

उपयोग के मामले

मैसेजिंग और सोशल प्लेटफ़ॉर्म (WhatsApp, Telegram, X, Instagram, Facebook) के लिए एक क्लिक में पूर्ण वृत्ताकार अवतार बनाएँ
ऐप आइकन्स पर तेज़ी से गोल किनारे जोड़ें (iOS 22–25 %, Android Adaptive Icon 25 %)
ई-कॉमर्स उत्पाद मुख्य छवियों के किनारों को नरम करके क्लिक-थ्रू और रूपांतरण दर बढ़ाएँ
PowerPoint स्लाइड, वीडियो एडिटिंग और प्रिंटिंग के लिए स्थानीय रूप से गोल किनारों वाली इमेज एसेट्स तैयार करें
अपने डिज़ाइन सिस्टम में आइकन और एसेट्स को एक जैसे किनारे के आकार पर मानकीकृत करें (एक-एक करके संसाधित करें)

उपयोग कैसे करें

इमेज चुनने के लिए अपलोड क्षेत्र पर क्लिक करें, या JPG, PNG, WEBP फ़ाइल को सीधे उस क्षेत्र में खींचें
तत्क्षण किनारों के लिए छोटा (10 %), मध्यम (25 %) या बड़ा (50 %) प्रीसेट चुनें, या स्लाइडर को अपनी इच्छित मान पर खींचें (प्रतिशत और पिक्सेल के बीच स्विच करने के लिए क्लिक करें)
आउटपुट स्वरूप चुनें: PNG (पारदर्शी पृष्ठभूमि), WEBP (छोटा आकार) या JPG (सफ़ेद पृष्ठभूमि, पारदर्शकता नहीं)
दाईं ओर रियल-टाइम पूर्वावलोकन देखें और -rounded प्रत्यय के साथ फ़ाइल सहेजने के लिए डाउनलोड बटन दबाएँ

विशेषताएं

दोहरी इकाई: किनारे की त्रिज्या के लिए पिक्सेल (0–500 px) और प्रतिशत (0–50 %) के बीच स्वतंत्र रूप से स्विच करें
3 प्रीसेट: छोटा (10 %), मध्यम (25 %), बड़ा (50 %) एक क्लिक में, साथ ही कस्टम स्लाइडर
3 आउटपुट स्वरूप: PNG (पारदर्शी), WEBP (छोटा आकार) या JPG (सफ़ेद पृष्ठभूमि) में निर्यात
रियल-टाइम पूर्वावलोकन: स्लाइडर समायोजित करते ही गोल किनारों का प्रभाव देखें, पारदर्शी क्षेत्रों को दिखाने वाला चेसबोर्ड बैकग्राउंड
ड्रैग एंड ड्रॉप अपलोड: क्लिक करके चुनें या JPG, PNG, WEBP इमेज को सीधे अपलोड क्षेत्र में खींचें
स्थानीय प्रसंस्करण: सब कुछ ब्राउज़र के Canvas में होता है, आपकी इमेज डिवाइस से बाहर नहीं जाती

Best Practices

पारदर्शकता चाहिए तो JPG के बजाय PNG चुनें

JPG Alpha चैनल का समर्थन नहीं करता। यदि आप JPG चुनते हैं तो किनारे सफ़ेद से भर दिए जाते हैं और अवांछनीय सफ़ेद ब्लॉक दिखाई देते हैं। केवल तभी JPG चुनें जब आपको पक्का यकीन हो कि पारदर्शकता आवश्यक नहीं है, अन्यथा PNG को डिफ़ॉल्ट रखें।

पारदर्शी और छोटे एसेट्स के लिए WEBP चुनें

WEBP भी पारदर्शकता का समर्थन करता है और PNG से 25–35 % छोटा होता है, वेब एसेट्स के लिए उपयुक्त। कुछ पुराने डिज़ाइन सॉफ़्टवेयर WEBP नहीं पहचानते, इसलिए टूल-दर-टूल सहयोग में PNG को प्राथमिकता दें।

ऐप आइकन के लिए गोल किनारे का अनुपात चुनना

iOS ऐप आइकन्स पर स्वचालित रूप से लगभग 22,37 % किनारा लगाता है, लेकिन स्रोत इमेज में सफ़ेद पृष्ठभूमि होने पर दिखने योग्य सफ़ेद किनारा बनता है। समाधान यह है कि पहले इस टूल से एक गोल किनारों वाला PNG तैयार किया जाए (22–25 % की सिफ़ारिश)। Android Adaptive Icon के लिए 25 % सुरक्षित त्रिज्या है।

पूर्ण वृत्ताकार अवतार के लिए 50 % त्रिज्या का उपयोग करें

अधिकांश सोशल प्लेटफ़ॉर्म (WhatsApp, Telegram, X, Instagram आदि) अवतार को पूर्ण वृत्त के रूप में दिखाते हैं। 50 % प्रीसेट एक क्लिक में पारदर्शी वृत्ताकार PNG बनाता है जो हल्के और गहरे दोनों थीम पर फिट बैठता है।

iOS ऐप आइकन दिशानिर्देश

निर्यात की गई गोल इमेज के ऊपर CSS border-radius न लगाएँ

जब आप इस टूल से गोल PNG निर्यात कर लें, तो उसे CSS border-radius + overflow:hidden वाले कंटेनर में न रखें, वरना किनारों पर दोहरी प्रक्रिया होगी और वे धुंधले हो जाएँगे। गोल इमेज को सीधे साधारण img टैग से प्रदर्शित करें।

अधिक जटिल आकृति चाहिए (प्रति कोना अलग त्रिज्या, केवल शीर्ष)?

यह टूल केवल चारों ओर समान किनारों का समर्थन करता है। केवल ऊपर, केवल नीचे, या प्रत्येक कोने के लिए अलग त्रिज्या (TabBar, स्प्लैश स्क्रीन) के लिए इमेज एडिटर या Figma जैसे डिज़ाइन टूल का उपयोग करें।

सामान्य प्रश्न

इमेज के किनारे गोल कैसे करें?

अपलोड करने के बाद त्वरित गोल किनारों के लिए छोटा, मध्यम या बड़ा प्रीसेट क्लिक करें, या अपनी पसंद का पिक्सेल मान (0–500 px) या प्रतिशत (0–50 %) सेट करने के लिए स्लाइडर खींचें। दायाँ पैनल रियल-टाइम में परिणाम दिखाता है। जब संतुष्ट हों तो डाउनलोड बटन दबाएँ, फ़ाइल स्वचालित रूप से -rounded प्रत्यय के साथ सहेजी जाएगी।

किनारे की त्रिज्या के लिए पिक्सेल या प्रतिशत — कौन सा बेहतर है?

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

गोल किए गए क्षेत्र का क्या होता है?

PNG या WEBP आउटपुट के साथ गोल किया गया क्षेत्र पूरी तरह पारदर्शी (Alpha=0) होता है और किसी भी पृष्ठभूमि में स्वाभाविक रूप से घुल जाता है। JPG आउटपुट के साथ यह क्षेत्र सफ़ेद से भर दिया जाता है (इंटरफ़ेस पर पीली चेतावनी दिखाई देती है); JPG तभी चुनें जब पारदर्शकता आवश्यक न हो।

कौन से इमेज स्वरूप समर्थित हैं?

इनपुट JPG, PNG और WEBP का समर्थन करता है। आउटपुट PNG (पारदर्शी), WEBP (छोटा) या JPG (सफ़ेद पृष्ठभूमि) हो सकता है। डाउनलोड की गई फ़ाइल को स्वचालित रूप से -rounded प्रत्यय मिलता है ताकि वह मूल से अलग पहचानी जा सके।

किनारे की त्रिज्या की सीमा क्या है?

प्रतिशत मोड 0 से 50 % (50 % पूर्ण वृत्त देता है), पिक्सेल मोड 0 से 500 px तक होता है। मान जितना बड़ा होगा, किनारा उतना ही गोल होगा। टूल मानक वृत्ताकार किनारों के लिए Canvas arcTo + clip का उपयोग करता है, Squircle सुपर-अंडाकार का समर्थन नहीं करता।

क्या मैं अवतार या ऐप आइकन बना सकता हूँ?

हाँ। पूर्ण वृत्ताकार अवतार के लिए 50 % प्रीसेट का उपयोग करें। iOS ऐप आइकन्स के लिए 22–25 % की सिफ़ारिश की जाती है (एक क्लिक में मिलान के लिए 25 % प्रीसेट का उपयोग करें)। Android Adaptive Icon के लिए 25 % सुरक्षित त्रिज्या है। पारदर्शी PNG आउटपुट हर थीम पर फिट बैठता है।

क्या किनारे गोल करने से इमेज धुंधली हो जाती है?

नहीं। टूल मूल रिज़ॉल्यूशन पर Canvas में पथ क्लिपिंग के माध्यम से काम करता है, पुनः-सैंपलिंग या संपीड़न नहीं करता। आउटपुट गुणवत्ता मूल के समान ही होती है; केवल किनारे कतरित होते हैं और किनारे तेज़ बने रहते हैं।

क्या मेरी इमेज सर्वर पर भेजी जाती है?

नहीं। सब कुछ ब्राउज़र में Canvas API के माध्यम से स्थानीय रूप से होता है। इमेज किसी सर्वर पर नहीं भेजी जाती और पृष्ठ छोड़ने पर हटा दी जाती है। व्यक्तिगत फ़ोटो, पहचान पत्र की स्कैन कॉपी और संवेदनशील एसेट्स को सुरक्षित रूप से संसाधित किया जा सकता है।

गोल किनारों का प्रभाव दिखाई क्यों नहीं देता?

कृपया जाँचें: ① त्रिज्या मान 0 से बड़ा हो (स्लाइडर बिल्कुल बाएँ न हो); ② इमेज सफलतापूर्वक लोड हुई हो (JPG, PNG या WEBP होनी चाहिए); ③ आपका ब्राउज़र HTML5 Canvas का समर्थन करता हो (सभी आधुनिक ब्राउज़र करते हैं)। यदि समस्या बनी रहे तो पृष्ठ ताज़ा करें और फिर से अपलोड करें।

CSS border-radius से क्या अंतर है?

CSS border-radius केवल ब्राउज़र के डिस्प्ले लेयर पर काम करता है और किनारे को इमेज फ़ाइल में नहीं जोड़ता। यह टूल असली PNG फ़ाइल निर्यात करता है जिसमें Alpha चैनल होता है, इसलिए गोल किनारों वाली इमेज PowerPoint, वीडियो एडिटिंग, प्रिंटिंग और CSS समर्थन न करने वाले हर वातावरण में काम करती है।

शब्दकोश

किनारे की त्रिज्या (Border Radius): गोल किनारे के चाप की त्रिज्या। बड़ा मान अधिक गोल किनारा देता है; अधिकतम इमेज की छोटी भुजा का आधा होता है, जिससे पूर्ण वृत्त बनता है। यह टूल पिक्सेल (0–500 px) और प्रतिशत (0–50 %) इकाइयों का समर्थन करता है।
Alpha चैनल: PNG और WEBP में निर्मित पारदर्शकता चैनल, प्रति पिक्सेल 0–255 मान के साथ। टूल गोल किनारों के पिक्सेल्स को Alpha=0 पर सेट करता है, जिससे पूरी तरह पारदर्शी आउटपुट बनता है जो किसी भी पृष्ठभूमि में घुल जाता है।
Squircle (सुपर-अंडाकार): iOS 7+ में पेश किया गया गोल आकार जो मानक किनारे से अधिक सहज है और समीकरण x⁴+y⁴=r⁴ का पालन करता है। यह टूल मानक चाप बनाता है; यदि Squircle चाहिए तो Figma या Sketch का उपयोग करें।
Adaptive Icon: Android 8.0+ के लिए अलग-अलग अग्रभूमि और पृष्ठभूमि परतों वाला आइकन स्वरूप। 25 % त्रिज्या सुरक्षित क्षेत्र है; OEM लॉन्चर अपना मास्क (वृत्त, squircle आदि) लागू करते हैं।
Canvas arcTo: Canvas 2D API की चाप बनाने की विधि। यह टूल arcTo + clip को मिलाकर गोल आयत का पथ बनाता है, इमेज को उसके अंदर कतरता है और निर्यात के समय बाहरी क्षेत्र को Alpha=0 पारदर्शी पिक्सेल बनाता है।

प्लेटफ़ॉर्म के अनुसार किनारे की त्रिज्या त्वरित संदर्भ

प्लेटफ़ॉर्म / तत्व	संदर्भ आकार	अनुशंसित अनुपात	लगभग (px)
iOS / iPadOS ऐप आइकन	`1024 × 1024`	लगभग 22,37 %	≈ 229 px
Android Adaptive Icon	`108 × 108`	लगभग 25 %	≈ 27 px
macOS Sonoma ऐप आइकन	`1024 × 1024`	Squircle सुपर-अंडाकार	निश्चित px नहीं
Windows 11 कार्ड	`—`	लगभग 8 px	8 px
Material Design 3 Large	`—`	लगभग 28 px	28 px
WhatsApp / Telegram अवतार	`640 × 640`	50 % (पूर्ण वृत्त)	320 px
Twitter / Instagram अवतार	`400 × 400`	50 % (पूर्ण वृत्त)	200 px
ई-कॉमर्स मुख्य इमेज	`800 × 800`	16–24 px अनुशंसित	16-24 px

Authoritative References

ReferenceMDN - border-radius
ReferenceApple HIG - ऐप आइकन दिशानिर्देश
ReferenceWikipedia - Squircle
ReferenceMDN - CanvasRenderingContext2D.arcTo()