Border Radius जेनरेटर

यह किसी square element को perfect circle में बदल देता है। सच्चा circle बनाने के लिए element की width और height equal होनी चाहिए — उदाहरण के लिए `width: 100px; height: 100px; border-radius: 50%`। 50% radius चारों sides पर बीच में मिलता है, जिससे perfect curve बनती है। Non-square element पर, 50% ellipse बनाता है — element की dimensions के अनुसार width या height में से जो ज़्यादा हो। यह CSS में circular avatar images, round buttons और icon containers बनाने का सबसे common तरीका है।

किसी non-square element जैसे button या badge पर `border-radius: 9999px` (या कोई भी बड़ी value जैसे 100px) का उपयोग करें। Browser automatically radius को element की shorter dimension के आधे तक clamp कर देता है, जिससे short ends perfect semicircles बन जाते हैं और long sides straight रहती हैं। यह classic pill-shaped CTA button बनाता है जो लगभग हर modern design system में दिखता है। `9999px` trick element size चाहे जो भी हो काम करती है — height का आधा manually calculate करने की जरूरत नहीं। इस generator का Pill preset यह pattern instantly apply करता है।

Pixel values absolute होती हैं — `12px` radius, element के size चाहे जो भी हो, 12 pixels ही रहता है। अगर element scale up या down होता है, corner size fixed रहती है। Percentage values relative होती हैं — `50%` हमेशा हर side के exact midpoint तक curve करता है, एक proportional shape बनाता है जो element के साथ scale होती है। Circles और pills के लिए percentage (`50%`) का उपयोग करें जो element के साथ scale होनी चाहिए। Cards, buttons और inputs जैसे UI components के लिए pixels का उपयोग करें जहाँ content चाहे जो भी हो consistent corner size चाहिए।

Standard `border-radius` केवल corners को outward (convex) curve कर सकता है। Inverted या concave corner — tickets, tabs और speech bubbles पर इस्तेमाल होने वाला inward 'notch' या 'cut-out' curve — के लिए `border-radius` अकेले काफी नहीं है। Common technique है radial-gradient mask: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, जिसे हर उस corner के लिए repeat करें जिसे inward bite करना हो। Alternative है एक positioned pseudo-element (`::before`) जिसे page का background colour दिया जाए और उसका अपना outward `border-radius` हो, corner पर layer करके ताकि concave shape दिखे। Ticket-stub edges के लिए, एक side पर repeating radial-gradient mask scalloped perforation effect देता है। इसलिए 'inverted border radius' actually एक masking trick है, border-radius value नहीं।

Individual corner properties का उपयोग करें: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, या `border-bottom-left-radius`। उदाहरण के लिए, `border-bottom-right-radius: 24px` केवल bottom-right corner को round करता है, बाकी तीन sharp रहते हैं। आप इन्हें freely combine कर सकते हैं: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` एक diagonally-rounded shape बनाता है। Shorthand में, दो values opposite corner pairs set करती हैं: `border-radius: 16px 0` top-left और bottom-right corners को round करता है, top-right और bottom-left sharp रहते हैं।

Top-left से clockwise: Top-left → Top-right → Bottom-right → Bottom-left। तो `border-radius: 16px 8px 0 8px` top-left को 16px, top-right को 8px, bottom-right को 0, और bottom-left को 8px देता है। यह `margin`, `padding` और `border-width` द्वारा उपयोग किए जाने वाले standard CSS shorthand direction से match करता है। दो values के साथ, पहली top-left और bottom-right पर apply होती है; दूसरी top-right और bottom-left पर। तीन values के साथ, दूसरी दोनों top-right और bottom-left पर apply होती है। एक value सभी चारों corners पर uniformly apply होती है।

हाँ — सीधे `<img>` element पर `border-radius` apply करें: circular avatar के लिए `img { border-radius: 50%; width: 100px; height: 100px; }` । Alternatively, image को `overflow: hidden` वाले `<div>` में wrap करें और wrapper पर border-radius apply करें, जो आपको ज़्यादा layout control देता है। इस tool के image upload feature का उपयोग करके preview करें कि आपकी actual photo पर radius कैसा दिखता है, CSS copy करने से पहले। यह avatar crops, media card thumbnails और gallery layouts के लिए विशेष रूप से useful है जहाँ exact clip shape design को affect करती है।

तीन corners को large value दें और एक को zero पर छोड़ें: `border-radius: 50% 50% 50% 0`। `transform: rotate(-45deg)` के साथ combine करने पर classic map-pin droplet shape बनती है। Droplet को अलग-अलग directions में point करने के लिए zero वाला corner बदलें: `0 50% 50% 50%` left point करता है, `50% 0 50% 50%` right point करता है। Zero वाला corner pointed tip बनाता है; बड़े radius वाले तीन corners rounded body बनाते हैं। यह location markers, pointers और illustration-style UI में decorative accents के लिए useful है।

Slash हर corner के लिए horizontal और vertical radii को अलग करता है। Syntax है: `border-radius: [horizontal radii] / [vertical radii]`। उदाहरण के लिए, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` एक egg-like shape बनाता है जहाँ हर corner का asymmetric elliptical curve होता है। इस tool का Random Blob generator इस syntax का उपयोग organic, asymmetric shapes produce करने के लिए करता है — hero section backgrounds, decorative blobs और illustration-style design elements के लिए popular। हर corner का horizontal-to-vertical radius ratio अलग हो सकता है।

cssmatic.com का border-radius tool functional है लेकिन outdated है — इसमें image upload, blob generation और preset library नहीं है। css-tricks.com almanac excellent documentation है लेकिन interactive generator नहीं है। bennettfeely.com का clip-path maker use case में overlap करता है लेकिन border-radius की जगह clip-path को target करता है। UtiloKit का generator offer करता है: image upload के साथ live preview (पूरी तरह client-side process), shape presets (circle, pill, card, egg, blob), 8-value slash syntax का उपयोग करके random blob generation, px/% unit toggle, और तीन copy formats। कोई ads नहीं, कोई watermark नहीं, कोई sign-up नहीं, और कुछ भी server पर नहीं जाता।

नहीं — image exclusively browser के File API का उपयोग करके load होती है और आपके device से कहीं नहीं जाती। Preview element image को locally `createObjectURL()` call का उपयोग करके render करता है जो पूरी तरह browser memory में रहती है। कोई upload नहीं, कोई server processing नहीं, कोई cloud storage नहीं। यही client-side architecture सभी features पर apply होती है: slider inputs, CSS generation, blob randomization, और clipboard copying सभी initial page load के बाद बिना किसी network request के JavaScript में run होते हैं। आपकी images और design work पूरी तरह private रहते हैं।

`border-radius` CSS transitions और keyframe animations के ज़रिए पूरी तरह animatable है। Hover पर दो values के बीच smoothly interpolate करने के लिए `transition: border-radius 0.3s ease` का उपयोग करें। Shapes के बीच continuously morph करने के लिए `@keyframes` का उपयोग करें — `0` से `50%` तक animate करने से square circle में pulse करता है। दो blob shapes के बीच morphing (अलग 8-value slash values) flowing, organic animations बनाता है जो hero backgrounds में popular है। ध्यान दें कि border-radius animate करने से हर frame पर repaint trigger होता है, इसलिए ऐसे elements पर `will-change: border-radius` का उपयोग करें जो frequently animate होते हों।

`border-radius` purely visual है — यह element की painted appearance को clip करता है लेकिन इसका layout box, margin area, या pointer event hit area नहीं बदलता। Invisible squared corners अभी भी clickable हैं और अभी भी layout space occupy करते हैं। Touch interfaces के लिए यह जानना ज़रूरी है: एक circular button के corners पर still square clickable region होता है। अगर आपको hit area rounded shape को precisely follow करना हो, तो `clip-path: circle()` का उपयोग करें जो pointer events को भी clip करता है। `box-shadow` सही तरह से `border-radius` को follow करता है; `outline` ज़्यादातर browsers में नहीं करता — rounded focus ring alternative के रूप में `box-shadow: 0 0 0 3px color` का उपयोग करें।

हाँ — tool पूरी तरह responsive है और किसी भी modern mobile browser में काम करता है। iPhone पर, Safari या Chrome में बिना कुछ install किए इसका उपयोग करें। Android पर, Chrome, Firefox और Edge सभी काम करते हैं। Sliders touch-friendly हैं और properly sized drag handles के साथ आते हैं। Image upload mobile पर native file picker का उपयोग करता है, जिससे आप अपने camera roll या files app से select कर सकते हैं। CSS को clipboard पर copy करना सभी modern mobile browsers पर supported standard Web Clipboard API से काम करता है। पूरा tool client-side run होता है, इसलिए कोई app download नहीं, कोई account नहीं, और कोई data कहीं नहीं जाता।