বিনামূল্যে CSS বর্ডার রেডিয়াস জেনারেটর

কিভাবে কাজ করে

border-radius জেনারেটর পুরোপুরি ব্রাউজারে চলে — কোনো সার্ভার, লাইব্রেরি বা আপলোড নেই। এটি React state ও useMemo দিয়ে সরাসরি JavaScript-এ CSS border-radius মানের স্ট্রিং তৈরি করে, তারপর একটি লাইভ div এলিমেন্টে ইনলাইন স্টাইল হিসেবে প্রয়োগ করে যাতে ব্রাউজারের নিজস্ব CSS ইঞ্জিন রিয়েল টাইমে আকৃতিটি আঁকে।

1. 1
   স্লাইডার state লেখে

   প্রতিটি range ইনপুট আটটি সংখ্যাসূচক state ভেরিয়েবলের একটিতে লেখে — চারটি অনুভূমিক কোণের ব্যাসার্ধ এবং উপবৃত্তাকার মোডের জন্য চারটি উল্লম্ব। Unified মোড setAll হেল্পার দিয়ে আটটিকে একটি স্লাইডারে মিলিয়ে সব মান একসাথে সিঙ্ক করে।
2. 2
   useMemo CSS মান তৈরি করে

   যেকোনো কোণের মান, একক (px বা %), বা উপবৃত্তাকার টগল বদলালে একটি useMemo হুক border-radius স্ট্রিং আবার হিসাব করে। সাধারণ মোডে এটি চার-মানের শর্টহ্যান্ড দেয়; উপবৃত্তাকার চালু থাকলে পূর্ণ আট-মানের সিনট্যাক্সের জন্য স্ল্যাশ বিভাজক যোগ করে — যেমন 32px 20px 20px 32px / 20px 32px 20px 32px।
3. 3
   ব্রাউজারের CSS ইঞ্জিন প্রিভিউ আঁকে

   হিসাব করা স্ট্রিংটি একটি সাধারণ div এলিমেন্টে ইনলাইন borderRadius স্টাইল হিসেবে সেট হয়। ব্রাউজারের লেআউট ইঞ্জিনই সব আঁকে — কোনো canvas, SVG বা তৃতীয় পক্ষের ড্রয়িং কোড নেই।
4. 4
   Clipboard API আউটপুট কপি করে

   Copy-তে ক্লিক করলে navigator.clipboard.writeText ডাকা হয়, বেছে নেওয়া ফরম্যাট টগল অনুযায়ী CSS ঘোষণা (border-radius: ...;) অথবা সমতুল্য Tailwind arbitrary-value ক্লাস (rounded-[...]) দিয়ে।

সম্পর্কিত টুলস