बॉर्डर रेडियस जनरेटर
विज़ुअल पूर्वावलोकन के साथ CSS border-radius वैल्यू बनाएं। मुफ़्त, तेज़ और बिना साइन-अप के पूरी तरह आपके ब्राउज़र में काम करता है।
अपडेट किया गया
Border Radius Generator
Create pixel-perfect CSS border-radius values with individual corner control, visual preview, shape presets, animation modes, gradient fill, SVG export, and multi-format code output.
Live Preview
border-radius: 16px;Corner Controls
Shape Gallery
Standard Shapes
Organic & Blob Shapes (8-Value)
Generated Code
.element {
border-radius: 16px;
}About Border Radius Generator
- Visual corner diagram — click to select and focus individual corners
- Individual corner control (TL/TR/BR/BL) or linked mode
- 8-value asymmetric syntax with H/V per corner
- Units: px, %, em, rem with smart max values
- Element scale slider for proportional previewing
- Solid, linear gradient, and radial gradient fill types
- 5 background patterns: solid, checkerboard, dots, lines, gradient
- 28 shape presets: circle, pill, leaf, blob, squircle, organic, shield, egg…
- 3 animation modes: Morph, Pulse, Bounce
- Dark/light preview with responsive sizes (mobile/tablet/desktop)
- History with visual thumbnails and one-click restore (last 20)
- Export as SVG clip-path with gradient fill support
- CSS, Tailwind, styled-components, and CSS custom properties output
Privacy First: All processing happens locally in your browser. No data is sent to any server.
Related Tools
अक्सर पूछे जाने वाले प्रश्न
border-radius के लिए px और % इस्तेमाल करने में क्या अंतर है?
पिक्सेल रेडियस निश्चित होता है: border-radius: 16px हर कोने को एलिमेंट के आकार के बावजूद ठीक 16 पिक्सेल तक गोल करता है। प्रतिशत रेडियस सापेक्ष होता है — इसे एलिमेंट की अपनी चौड़ाई और ऊँचाई के विरुद्ध मापा जाता है, इसलिए बॉक्स बड़ा या छोटा होने पर कोने स्केल करते हैं। यह अंतर आकार के लिए मायने रखता है। 50% के क़रीब प्रतिशत कोनों को इतना मोड़ देता है कि वे मिल जाते हैं, एक वर्ग को वृत्त या आयत को दीर्घवृत्त में बदल देता है, इसीलिए अवतार और गोल बटन 50% इस्तेमाल करते हैं, न कि निश्चित पिक्सेल वैल्यू। पिक्सेल अलग-अलग आकार वाले कार्ड और इनपुट में एक संगत, अनुमानित नरमी बनाए रखते हैं; प्रतिशत तरल आकार बनाते हैं जो अनुकूल होते हैं। यह जनरेटर आपको प्रति डिज़ाइन यूनिट स्विच करने देता है (200 तक px, 50 तक %) और लाइव परिणाम दिखाता है, ताकि आप कॉपी करने से पहले देख सकें कि आपको कौन सा व्यवहार चाहिए।
मैं border-radius से पूर्ण वृत्त या पिल आकार कैसे बनाऊं?
वृत्त के लिए, एक समबाहु (वर्ग) एलिमेंट को border-radius: 50% दें। प्रतिशत प्रत्येक कोने को बॉक्स के सापेक्ष गोल करता है, और 50% पर चारों चाप मिलकर एक पूर्ण वृत्त बनाते हैं — यह गोल अवतार और आइकन बटन के लिए मानक तकनीक है। पिल के लिए, तरकीब अलग है: किसी ऐसे एलिमेंट पर जो ऊँचाई से अधिक चौड़ा है, बहुत बड़ी पिक्सेल वैल्यू जैसे 9999px लागू करें। रेडियस छोटी भुजा के आधे पर सीमित रहता है, इसलिए दोनों सिरे पूरी तरह गोल अर्धवृत्त बन जाते हैं जबकि बीच का सीधा हिस्सा सपाट रहता है, जिससे क्लासिक टैग या टॉगल लुक मिलता है। एलिमेंट को वर्ग रखने पर यह फिर से वृत्त बनाता है। इस टूल में तैयार Circle और Pill प्रिसेट, साथ ही लाइव प्रिव्यू शामिल हैं, ताकि आप अपने वास्तविक एलिमेंट आकार पर आकार की पुष्टि कर सकें और फिर कोड पेस्ट कर सकें।
8-value border-radius syntax क्या है और यह blob आकार कैसे बनाता है?
मानक border-radius प्रत्येक कोने को एक rounding वैल्यू देता है। आठ-वैल्यू रूप प्रत्येक कोने को एक क्षैतिज रेडियस और एक ऊर्ध्वाधर रेडियस में विभाजित करता है, जिन्हें एक स्लैश से अलग किया जाता है: स्लैश से पहले की वैल्यू क्षैतिज radii सेट करती हैं और उसके बाद वाली ऊर्ध्वाधर। जब किसी कोने के क्षैतिज और ऊर्ध्वाधर radii भिन्न होते हैं, तो चाप एक सममित, अंडे जैसा वक्र बन जाता है न कि स्वच्छ चतुर्थांश-वृत्त। चार बेमेल वाले कोनों को मिलाएँ और रूपरेखा नरम और अनियमित हो जाती है — वह जैविक "blob," squircle, या pebble आकार जो आधुनिक UI बैकग्राउंड और सजावटी एलिमेंट में लोकप्रिय हैं। इन्हें हाथ से ढालना लगभग असंभव है क्योंकि आठ संख्याएँ एक साथ परस्पर क्रिया करती हैं। यह जनरेटर सभी आठ वैल्यू उजागर करता है, इस syntax पर बने squircle, pebble, और wave जैसे जैविक प्रिसेट देता है, और परिणाम लाइव रेंडर करता है ताकि आप एक रेडियस खिसकाकर आकृति को तुरंत बदलते हुए देख सकें।
यह टूल border-radius को Tailwind CSS क्लास में कैसे बदलता है?
जब सभी चार कोने एक ही पिक्सेल वैल्यू साझा करते हैं, तो जनरेटर जाँचता है कि क्या वह वैल्यू Tailwind के डिफ़ॉल्ट radius स्केल से मेल खाती है। यदि हाँ, तो आपको बिल्ट-इन यूटिलिटी मिलती है — उदाहरण के लिए एक छोटा radius rounded-md में मैप होता है, और बहुत बड़ी वैल्यू वृत्त और पिल के लिए rounded-full में। जब वैल्यू किसी प्रिसेट स्टेप से मेल नहीं खाती, तो टूल Tailwind के arbitrary-value syntax पर वापस चला जाता है, और rounded-[18px] जैसी क्लास बनाता है जिसमें सटीक नंबर बेक होता है। मिश्रित कोनों को उसी तरह हैंडल किया जाता है, उपयुक्त प्रति-कोनर यूटिलिटी या arbitrary वैल्यू में मैप किया जाता है। इससे आपको स्केल याद रखने या यह अनुमान लगाने से बचाव मिलता है कि कौन सी नामित क्लास किस पिक्सेल अमाउंट के बराबर है। Tailwind के साथ-साथ, आप सादा CSS shorthand, styled-components टेम्पलेट, या CSS custom properties कॉपी कर सकते हैं — अपने प्रोजेक्ट का फॉर्मैट चुनें और सीधे पेस्ट करें।
em और rem एक ही संख्या के पिक्सेल से बड़ा radius क्यों देते हैं?
em और rem font-relative यूनिट हैं, absolute नहीं। एक rem root font size के बराबर होता है, और एक em current एलिमेंट के font size के बराबर; एक सामान्य सेटअप में दोनों 16 पिक्सेल में हल होते हैं। इसलिए border-radius: 1rem लगभग 16px radius है, और 2rem लगभग 32px — जो border-radius: 2px से कहीं अधिक गोल है। इसका फ़ायदा scalability है: यदि कोई उपयोगकर्ता या आपका डिज़ाइन सिस्टम base font size बढ़ाता है, तो em या rem में बने radius अनुपातिक रूप से बढ़ते हैं और टेक्स्ट के साथ दृश्य संतुलन बनाए रखते हैं, जबकि पिक्सेल radius जमे रहते हैं। rem इस्तेमाल करें जब आप चाहें कि कोने पूरे थीम में आपके टाइपोग्राफिक स्केल को ट्रैक करें, और em जब उन्हें किसी एक कंपोनेंट के font size से जोड़ना हो। यह जनरेटर प्रिव्यू में em और rem की गणना 16px base के विरुद्ध करता है ताकि आपको वही rounding दिखे जो शिप होता है, और आप कभी भी यूनिट स्विच करके तुलना कर सकते हैं।
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/border-radius-generator" title="Border Radius Generator — The Toolbox" width="100%" height="320" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/utility-tools/border-radius-generator?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Border Radius Generator</a> by The Toolbox</p>संबंधित टूल
मुफ़्त सुरक्षित पासवर्ड जनरेटर
अनुकूलन योग्य विकल्पों के साथ सुरक्षित, यादृच्छिक पासवर्ड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त UUID/GUID जनरेटर
सार्वभौमिक रूप से अद्वितीय पहचानकर्ता (UUID/GUID) बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त QR कोड जनरेटर ऑनलाइन
URL, टेक्स्ट, WiFi क्रेडेंशियल और बहुत कुछ के लिए QR कोड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON फ़ॉर्मेटर और वैलिडेटर
सिंटैक्स हाइलाइटिंग और त्रुटि पहचान के साथ JSON डेटा को फ़ॉर्मेट, सत्यापित और सुंदर बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
Border Radius Generator के बारे में
Border Radius Generator CSS border-radius वैल्यू बनाने और production-ready code कॉपी करने के लिए एक मुफ़्त visual tool है। पिक्सेल वैल्यू अनुमान लगाकर और स्टाइलशीट reload करने के बजाय, आप slider खींचते हैं, लाइव प्रिव्यू के कोने real time में गोल होते देखते हैं, और परिणाम सीधे अपने प्रोजेक्ट में पेस्ट करते हैं। यह front-end developer, UI designer, और बटन, कार्ड, अवतार, badge, या modal style कर रहे किसी भी व्यक्ति के लिए बनाया गया है जो कोनों को एक संख्या पर commit करने से पहले बिल्कुल सही दिखना चाहते हैं।
सब कुछ local रूप से आपके browser में चलता है। आप जो बनाते हैं कुछ भी upload नहीं होता, कोई sign-up नहीं है, और कोई software install नहीं है — generator पेज लोड होते ही काम करता है और बाद में offline भी काम करता रहता है।
आप क्या control कर सकते हैं
border-radius एक shorthand है जो आठ तक वैल्यू स्वीकार करती है, और यह generator सभी को उजागर करता है:
- चार कोने, linked या individual — सभी कोने साथ एडजस्ट करें, या उन्हें unlink करके top-left, top-right, bottom-right, और bottom-left अलग से सेट करें। एक visual corner diagram आपको किसी कोने पर click करके focus करने देता है।
- चार यूनिट — px (200 तक), % (50 तक, एलिमेंट के साथ स्केल होने वाले fluid shape के लिए), em, और rem (प्रत्येक 10 तक)। प्रतिशत ही वर्ग को दीर्घवृत्त या वृत्त में बदलते हैं।
- 8-value asymmetric mode — प्रत्येक कोने को एक स्वतंत्र क्षैतिज और ऊर्ध्वाधर रेडियस दें
horizontal / verticalslash syntax का उपयोग करके। इसी तरह जैविक "blob" आकार बनते हैं।
आप preview box को solid fill या linear/radial gradient से recolor भी कर सकते हैं, एलिमेंट को 30% से 200% तक scale कर सकते हैं, mobile, tablet, और desktop preview size के बीच switch कर सकते हैं, और dark background toggle कर सकते हैं — उपयोगी क्योंकि सफ़ेद पर क्रिस्प दिखने वाला radius dark पर भारी दिख सकता है।
Preset और code आउटपुट
एक shape gallery तैयार starting point देती है: XS से 3XL तक standard rounding, साथ ही circle, pill, leaf, ticket, tab, chat-bubble, shield, और egg आकार, और 8-value syntax पर बने आठ जैविक preset (squircle, pebble, wave, amoeba, flower, और अधिक)। एक "Random" button वैल्यू shuffle करकर idea देता है, और एक history panel आपके पिछले 20 saved state clickable thumbnail के रूप में रखता है ताकि आप तुलना कर सकें और restore कर सकें।
जब आकार सही दिखे, उसे अपने stack के फॉर्मैट में कॉपी करें:
- CSS — एक स्वच्छ
border-radiusrule, अपने सबसे छोटे form में (सभी कोने match होने पर single वैल्यू)। - Tailwind CSS —
rounded-mdयाrounded-fullजैसे बिल्ट-इन क्लास में mapped जहाँ वैल्यू default स्केल से मेल खाती है, या अन्यथाrounded-[16px]जैसे arbitrary वैल्यू। - styled-components / Emotion — एक तैयार template literal।
- CSS custom properties — प्रति-कोनर वैरिएबल जिन्हें आप theme या कंपोनेंट लेवल पर override कर सकें।
आप सटीक आकार को SVG clip-path के रूप में भी export कर सकते हैं, gradient fill सहित, mask या graphic asset के रूप में उपयोग के लिए।
border-radius क्यों मायने रखता है
कोने का rounding एक polished interface के सबसे दिखने वाले signal में से एक है। तीखे 0px कोने technical या formal दिखते हैं; एक छोटा 4–8px radius कार्ड और इनपुट को बिना ध्यान खींचे नरम करता है; बड़ी वैल्यू friendly और modern लगती हैं। Consistency असली जीत है — एक radius स्केल परिभाषित करना (उदाहरण 4, 8, 16px) और पुनः उपयोग करना product को coherent बनाए रखता है।
कुछ वैल्यू याद रखने योग्य हैं: border-radius: 50% एक समबाहु वर्ग को पूर्ण वृत्त में बदलता है, जो गोल अवतार बनाने का मानक तरीका है। एक बहुत बड़ी पिक्सेल वैल्यू जैसे 9999px चौड़े-से-ऊँचे एलिमेंट पर पूरी तरह गोल सिरों वाला पिल आकार बनाती है, tag और toggle button पर आम। और चूँकि property smoothly animate होती है, आप hover पर कोने transition कर सकते हैं — Border Radius Generator में Morph, Pulse, और Bounce preview mode शामिल हैं ताकि आप keyframe लिखने से पहले वह motion देख सकें।