CSS বর্ডার-রেডিয়াস জেনারেটর

CSS বর্ডার-রেডিয়াস জেনারেটর কী?

CSS বর্ডার-রেডিয়াস জেনারেটর হলো CSS-এর border-radius প্রপার্টির জন্য একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা ফ্রন্ট-এন্ড ডেভেলপার ও ডিজাইনারদের জন্য তৈরি। রেঞ্জ স্লাইডার ও সংখ্যা ইনপুট ব্যবহার করে প্রতিটি কোণের অনুভূমিক ও উল্লম্ব ব্যাসার্ধ পিক্সেলে সেট করুন, একটি একক বেছে নিন, এবং উপবৃত্তাকার কোণের স্ল্যাশ সিনট্যাক্স পেতে উপবৃত্তাকার মোড চালু করুন। একটি প্রিভিউ বক্স গোলাকার আকৃতি রিয়েল-টাইমে দেখায়, এবং কপি করার জন্য সংহত সংক্ষিপ্ত ঘোষণা তৈরি হয়। দ্রুত শুরু করতে সেগমেন্টেড কন্ট্রোল থেকে Rounded, Pill, Circle বা একটি অর্গানিক Blob-এর মতো প্রিসেট বেছে নিন, তারপর যেকোনো কোণ সূক্ষ্মভাবে সমন্বয় করুন। কোণের ক্রম মুখস্থ না করেই নরম কার্ড, পিল বোতাম, নিখুঁত বৃত্ত, স্কুইর্কল এবং ফোঁটার মতো সাজসজ্জার আকৃতি ডিজাইন করতে এটি ব্যবহার করুন।

CSS বর্ডার-রেডিয়াস জেনারেটর কীভাবে ব্যবহার করবেন

1. শুরুর আকৃতি লোড করতে সেগমেন্টেড কন্ট্রোল থেকে একটি প্রিসেট (Rounded, Pill, Circle বা Blob) বেছে নিন।
2. সেই কোণের অনুভূমিক ব্যাসার্ধ সেট করতে প্রতিটি কোণের রেঞ্জ স্লাইডার টানুন বা একটি সংখ্যা টাইপ করুন।
3. প্রতিটি কোণে দ্বিতীয় উল্লম্ব ব্যাসার্ধ দেখাতে এবং স্ল্যাশ সিনট্যাক্স দিয়ে উপবৃত্তাকার কোণ তৈরি করতে Elliptical চালু করুন।
4. সেটিংসে একক (px বা %) বেছে নিন; শতাংশ ব্যাসার্ধকে বক্সের আকার অনুযায়ী মাপে।
5. লাইভ প্রিভিউ আপডেট হতে দেখুন, তারপর তৈরি হওয়া সংক্ষিপ্ত border-radius আপনার স্টাইলশিটে কপি করুন।

উদাহরণ

চারটি কোণই 16, উপবৃত্তাকার বন্ধ

border-radius: 16px;

প্রিসেট Pill, সব কোণ 9999

border-radius: 9999px;

উপরে-বাঁয়ে 40/20, উপরে-ডানে 10, নিচে-ডানে 40/20, নিচে-বাঁয়ে 10, উপবৃত্তাকার চালু

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

সচরাচর জিজ্ঞাসিত প্রশ্ন

চারটি কোণ কোন ক্রমে থাকে?

সংক্ষিপ্ত রূপ কোণগুলো উপরে-বাঁ থেকে শুরু করে ঘড়ির কাঁটার দিকে তালিকাভুক্ত করে: উপরে-বাঁয়ে, উপরে-ডানে, নিচে-ডানে, নিচে-বাঁয়ে। এই টুল সবসময় চারটি মানই এই ক্রমে আউটপুট করে, তাই ফলাফল দ্ব্যর্থহীন এবং পরে হাতে সংশোধন করা সহজ।

উপবৃত্তাকার মোড কী করে?

border-radius প্রতি কোণে একটি অনুভূমিক ও একটি উল্লম্ব ব্যাসার্ধ নিতে পারে, একটি স্ল্যাশ দিয়ে পৃথক করা, যাতে বৃত্তাকারের বদলে উপবৃত্তাকার কোণ আঁকা যায়। প্রতিটি কোণের জন্য দ্বিতীয় উল্লম্ব ব্যাসার্ধ সেট করতে Elliptical চালু করুন; তখন আউটপুট 'অনুভূমিক / উল্লম্ব' স্ল্যাশ সিনট্যাক্স ব্যবহার করে।

আমার কি px ব্যবহার করা উচিত নাকি শতাংশ?

পিক্সেল বক্স নির্বিশেষে একটি নির্দিষ্ট কোণ আকার দেয়। শতাংশ বক্সের প্রস্থ ও উচ্চতার সাপেক্ষে, তাই প্রতিটি কোণে 50% একটি বর্গকে নিখুঁত বৃত্তে পরিণত করে এবং উপাদানের আকার পরিবর্তনে গোলাকৃতিও মাপিত হয়। সেটিংসে একক পরিবর্তন করুন।

নিখুঁত বৃত্ত বা পিল কীভাবে বানাবো?

বর্গ থেকে বৃত্ত পেতে Circle প্রিসেট (প্রতিটি কোণে 50%) বেছে নিন, অথবা ছোট বাহুগুলোকে পূর্ণ অর্ধবৃত্ত করতে Pill প্রিসেট (খুব বড় পিক্সেল ব্যাসার্ধ) বেছে নিন। আপনি একটি প্রিসেট থেকে শুরু করে আলাদা কোণও সূক্ষ্মভাবে সমন্বয় করতে পারেন।

আমার ডেটা কি কোথাও আপলোড হয়?

না। জেনারেটরটি সম্পূর্ণরূপে আপনার ব্রাউজারে JavaScript দিয়ে চলে — আপনার ব্যাসার্ধ মান কখনো কোনো সার্ভারে পাঠানো হয় না, তাই এটি ব্যক্তিগতভাবে কাজ করে এবং পেজ লোড হওয়ার পর অফলাইনেও।