Handytool
डेवलपरमुफ़्तस्थानीय रूप से चलता है

CSS border-radius generator

CSS border-radius को visually design करें — uniform, per-corner, और elliptical — live preview के साथ।

प्रीव्यू
CSS
border-radius: 16px;
मोड
यूनिट

Per-corner मोड प्रत्येक कोने को अलग से नियंत्रित करता है; elliptical horizontal और vertical radii को अलग करता है।

CSS border-radius generator के बारे में

Handytool का border-radius generator आपको एक element के corners को sliders के साथ shape करने देता है guesswork के बजाय। Uniform mode का उपयोग करें एक simple rounded box के लिए, per-corner mode asymmetric pill shapes बनाने के लिए, या elliptical mode organic blob shapes के लिए। Preview live update होता है और CSS declaration एक click दूर है।

CSS border-radius generator की विशेषताएँ

  • 01

    Uniform और per-corner modes

    Uniform mode हर corner को एक radius apply करता है। Per-corner mode top-left, top-right, bottom-right, और bottom-left को independently control करता है — pill, leaf, और asymmetric tag shapes कुछ clicks दूर हैं।

  • 02

    Elliptical (X/Y) corners

    Elliptical mode को toggle करें एक horizontal और एक vertical radius को per corner specify करने के लिए — organic, blob-like shapes के लिए CSS syntax को support करता है।

  • 03

    तीन units

    px, %, और rem के बीच switch करें। Percentage values true ellipses create करते हैं जो box के साथ scale करते हैं; rem values root font size को track करते हैं accessibility के लिए।

CSS border-radius generator अक्सर पूछे जाने वाले प्रश्न

px और % के बीच अंतर क्या है?
Pixel radii absolute हैं — एक 16px corner हमेशा 16px है। Percentage radii element के width और height के relative हैं, इसलिए 50% एक square box पर एक perfect circle create करता है और एक rectangle पर एक ellipse।
मुझे elliptical mode का उपयोग कब करना चाहिए?
Elliptical mode का उपयोग करें जब आप एक corner चाहते हैं जो एक axis पर अधिक bulge करे — उदाहरण के लिए एक horizontal pill (50%/100%) या एक leaf-like blob shape। CSS इसे express करता है `top-left-x top-right-x ... / top-left-y top-right-y ...` के रूप में।
मेरा percent radius एक non-square box पर गलत क्यों दिख रहा है?
Percentages on border-radius corresponding side के relative हैं: horizontal percentages to width, vertical to height। एक wide, short box पर यह means corners stretch into ellipses, perfect arcs नहीं।
क्या output हर browser में काम करता है?
हाँ — border-radius और elliptical syntax हर modern browser में supported हैं including Safari, Firefox, Edge और Chrome के सभी evergreen versions।

संबंधित टूल

डेवलपर →

अन्य टूल्स देखें

सभी टूल →