CSS বর্ডার রেডিয়াস জেনারেটর কী?
ফ্রি অনলাইন CSS বর্ডার রেডিয়াস জেনারেটর। ভিজুয়াল কন্ট্রোলের মাধ্যমে চার কোণার বর্ডার রেডিয়াস সামঞ্জস্য করুন।
CSS-এর border-radius প্রপার্টি এলিমেন্টের কোণগুলোর গোলাকৃতির মাত্রা নিয়ন্ত্রণ করে এবং এর বহুমুখী ব্যবহার সাধারণ গোলাকার আয়তক্ষেত্রের চেয়ে অনেক বেশি। প্রতিটি কোণ আলাদাভাবে সামঞ্জস্য করে আপনি পিল আকৃতি, বৃত্ত, অপ্রতিসম আকার এবং জটিল জৈব-দৃষ্টিসম্পন্ন রূপ তৈরি করতে পারেন — সবকিছু একটি মাত্র CSS প্রপার্টি দিয়ে। CSS বর্ডার রেডিয়াস জেনারেটর চারটি কোণের জন্যই আলাদা স্লাইডার নিয়ন্ত্রণ দেয়, সাথে সাথে একটি লাইভ প্রিভিউ যা তাৎক্ষণিকভাবে আপডেট হয়।
প্রতিটি কোণ — উপরে-বাম, উপরে-ডান, নিচে-ডান, নিচে-বাম — এর নিজস্ব স্লাইডার আছে, যার ফলে আপনি সম্পূর্ণ অপ্রতিসম আকার তৈরি করতে পারেন। পিক্সেল (px) এবং শতাংশ (%)-এর মধ্যে ইউনিট টগল আচরণ উল্লেখযোগ্যভাবে পরিবর্তন করে। পিক্সেল মান স্থির-রেডিয়াস কোণ তৈরি করে যা এলিমেন্টের মাত্রা নির্বিশেষে একই আকারে থাকে। শতাংশ মান রেডিয়াসকে এলিমেন্টের আকারের সাথে যুক্ত করে, এভাবেই আপনি নিখুঁত বৃত্ত তৈরি করেন (একটি বর্গক্ষেত্রে border-radius: 50%)।
চারটি প্রিসেট সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্র কভার করে। বৃত্ত একটি নিখুঁত বৃত্তের জন্য border-radius: 50% তৈরি করে (বা বর্গ নয় এমন এলিমেন্টে উপবৃত্ত)। পিল সম্পূর্ণ গোলাকার প্রান্তযুক্ত আকার তৈরি করে (border-radius: 9999px), বাটন ব্যাজ এবং ট্যাগের জন্য দরকারি। কার্ড কার্ড কম্পোনেন্ট এবং কন্টেইনারের জন্য উপযুক্ত একটি সূক্ষ্ম 8px রাউন্ডিং প্রয়োগ করে। রাউন্ডেড বাটন এবং ফর্ম ইনপুটের জন্য উপযোগী সব কোণে 8px রাউন্ডিং প্রয়োগ করে।
জেনারেট হওয়া CSS কোড শর্টহ্যান্ড সিনট্যাক্স দেখায়। যদি চারটি কোণের মান একই হয়, তবে এটি একটি একক মান আউটপুট করে (যেমন, border-radius: 8px)। যদি কোণগুলো ভিন্ন হয়, তবে এটি ঘড়ির কাঁটার দিকে চার-মানের সিনট্যাক্স আউটপুট করে (উপরে-বাম, উপরে-ডান, নিচে-ডান, নিচে-বাম)। কোডটি আপনার স্টাইলশিটে কপি করার জন্য প্রস্তুত।