मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क CSS बोर्डर रेडियस जेनेरेटर

प्रत्येक कुनामा स्वतन्त्र नियन्त्रणका साथ गोलाकार कुनाहरू दृश्यात्मक रूपमा डिजाइन गर्नुहोस्। जैविक blob आकारहरूका लागि elliptical X/Y सिन्ट्याक्स समर्थन गर्छ।

लोड भएपछि अफलाइन काम गर्छ
border-radius: 20px 20px 20px 20px;
एकाइ

सामान्य प्रयोगहरू

  • जैविक ब्लब आकारहीरो खण्ड र चित्रकलाको लागि अद्वितीय ब्लब आकार बनाउन अण्डाकार X/Y वाक्यविन्यास प्रयोग गर्नुहोस्।
  • कार्ड र कन्टेनर कोनहरुआधुनिक UI डिजाइनमा कार्ड, कन्टेनर र प्यानलहरु को लागि मानक गोलाकार कोन।
  • अवतार र प्रोफाइल चित्र आकारप्रोफाइल चित्र को लागि सही कोन शैली बनाउनुहोस्: गोलाकार, squircle, वा गोल वर्ग।
  • गोली, ट्यागहरु र ब्याज9999 प्रिसेट को साथ पूरी तरह गोल बुलेट बटन, ट्यागहरु र ब्याज निर्माण गर्नुहोस्।
  • असिमेट्रिक कोन डिजाइनकोन मा त्रिज्या मिश्रण गर्दै विशिष्ट, ब्राण्ड-पहिचान योग्य कार्ड र बटन बनाउनुहोस्।

यो कसरी काम गर्छ

border-radius जेनेरेटर पूर्ण रूपमा ब्राउजरमा चल्छ — कुनै सर्भर छैन, कुनै लाइब्रेरी छैन, र कुनै अपलोड छैन। यसले React स्टेट र useMemo प्रयोग गरी सीधै JavaScript मा CSS border-radius मान स्ट्रिङ बनाउँछ, त्यसपछि यसलाई प्रत्यक्ष div एलिमेन्टमा इनलाइन स्टाइलको रूपमा लागू गर्छ ताकि ब्राउजरको आफ्नै CSS इन्जिनले आकार वास्तविक समयमा रेन्डर गर्छ।

  1. 1
    स्लाइडरहरूले स्टेट लेख्छन्
    हरेक रेन्ज इनपुटले आठ संख्यात्मक स्टेट भेरिएबलमध्ये एउटामा लेख्छ — चार क्षैतिज कुना रेडियस र इलिप्टिकल मोडका लागि चार ठाडो। Unified मोडले सबै आठलाई हरेक मान एकैचोटि सिंक्रोनाइज गर्ने setAll हेल्पर मार्फत एउटा स्लाइडरमा संकुचित गर्छ।
  2. 2
    useMemo ले CSS मान जोड्छ
    कुनै पनि कुना मान, एकाइ (px वा %), वा इलिप्टिकल टगल बदलिँदा एउटा useMemo हुकले border-radius स्ट्रिङ पुनः गणना गर्छ। मानक मोडमा यसले चार-मान संक्षिप्त रूप उत्पादन गर्छ; इलिप्टिकल अन हुँदा, यसले पूर्ण आठ-मान सिन्ट्याक्सका लागि स्ल्यास छुट्याउने थप्छ — जस्तै 32px 20px 20px 32px / 20px 32px 20px 32px।
  3. 3
    ब्राउजर CSS इन्जिनले पूर्वावलोकन रेन्डर गर्छ
    गणना गरिएको स्ट्रिङ एउटा सादा div एलिमेन्टमा इनलाइन borderRadius स्टाइलको रूपमा सेट गरिन्छ। ब्राउजरको लेआउट इन्जिनले सबै रेन्डरिङ गर्छ — कुनै क्यानभास छैन, कुनै SVG छैन, र कुनै तेस्रो-पक्ष ड्रइङ कोड छैन।
  4. 4
    Clipboard API ले आउटपुट प्रतिलिपि गर्छ
    Copy क्लिक गर्दा navigator.clipboard.writeText लाई CSS घोषणा (border-radius: ...;) वा बराबर Tailwind arbitrary-value क्लास (rounded-[...]) सँग कल हुन्छ, छानिएको फर्म्याट टगलमा निर्भर गरी।

सम्बन्धित उपकरणहरू

🎨

CSS बक्स शेडो जेनेरेटर

लाइभ प्रिभ्यू, बहु-तह स्ट्याकिङ, रङ चयनकर्ता, inset टगल, र एक-क्लिक कपीसहित CSS box-shadow का लागि भिजुअल बिल्डर। Material, neumorphism, र glow प्रिसेटहरू समावेश छन्।

प्रयास गर्नुहोस्
🟦

CSS ग्रिड जनरेटर

CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
↔️

CSS Flexbox जनरेटर

Flex दिशा, र्याप, जस्टिफाई र लाइभ वस्तुहरूमा पङ्क्तिबद्ध गर्नुहोस् — र CSS प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू