CSS বর্ডার রেডিয়াস জেনারেটর
একটি স্লাইডার টানুন বা প্রিসেট বাছুন — আকৃতি লাইভ দেখুন এবং এক ক্লিকে border-radius CSS কপি করুন।
মোডএকক
প্রিসেট
প্রিভিউ — পাশাপাশি ব্যাসার্ধ যোগফলে বাহুর চেয়ে বেশি হলে ব্রাউজার সেগুলো অনুপাতে ছোট করে, তাই প্রিভিউটাই আসল ফলাফল।
কীভাবে ব্যবহার করবেন
- পর্দায় ইতিমধ্যেই একটি গোলাকার কার্ড (16px) আছে — ব্যাসার্ধ স্লাইডার টানুন বা একক (px / %) বদলান, সবকিছু লাইভ হালনাগাদ হয়, কোনো বোতাম চাপতে হয় না।
- চিপ দিয়ে মোড বদলান: "সব কোণ" একটি স্লাইডার চালায়, "প্রতি কোণ" চারটি কোণ আলাদাভাবে সম্পাদনা করে (উপরের বাঁ, উপরের ডান, নিচের ডান, নিচের বাঁ), "উপবৃত্তাকার" প্রতি কোণে অনুভূমিক ও উল্লম্ব ব্যাসার্ধ যোগ করে (স্ল্যাশ সিনট্যাক্স)।
- প্রিসেটে (তীক্ষ্ণ, গোলাকার কার্ড, বৃত্ত, পিল, পাতা, ব্লব) ক্লিক করে প্রস্তুত আকৃতি বসান — মোড ও একক স্বয়ংক্রিয়ভাবে অনুসরণ করে। এক ক্লিকে সম্পূর্ণ border-radius ঘোষণা কপি করুন।
উদাহরণ
প্রিসেট
গোলাকার কার্ড
border-radius CSS
border-radius: 16px;
পাতা প্রিসেট (প্রতি কোণ, 0 / 50% / 0 / 50%) সংক্ষেপে দাঁড়ায় border-radius: 0% 50%;, আর ব্লব প্রিসেট দেয় উপবৃত্তাকার রূপ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;। কোণগুলো যখন একে অপরের প্রতিচ্ছবি, তখন ছোট শর্টহ্যান্ড ব্যবহৃত হয় — ঠিক CSS শর্টহ্যান্ড নিয়মের মতো।
পরিধি, সীমাবদ্ধতা ও সাধারণ প্রশ্ন
- কেবল border-radius: iOS-ধাঁচের মসৃণ/অবিচ্ছিন্ন কোণ (স্কোয়ার্কল) নেই — সেগুলোর জন্য clip-path বা SVG দরকার এবং পরিধির বাইরে।
- আগের CSS মান পেস্ট করা যায় না: প্রতিটি মান আসে স্লাইডার, প্রিসেট ও মোড চিপ থেকে, তাই ভুল পার্স করার কিছু নেই।
- পাশাপাশি ব্যাসার্ধের যোগফল এক বাহুর চেয়ে বেশি হলে ব্রাউজার সেগুলো অনুপাতে ছোট করে। প্রিভিউ আসল রেন্ডার ফলাফল; কোড বক্স আপনার দেওয়া মান দেখায়।
- পিল প্রিসেট 9999px দেয় — "যতটা সম্ভব গোল" বোঝানোর প্রচলিত শর্টহ্যান্ড; ব্রাউজার এটি ছোট বাহুর অর্ধেকে সীমিত করে।
- শতাংশ অক্ষ অনুযায়ী মাপা হয়: অনুভূমিক ব্যাসার্ধ প্রস্থের সাপেক্ষে, উল্লম্ব ব্যাসার্ধ উচ্চতার সাপেক্ষে (প্রিভিউ বর্গাকার, তাই সেখানে দুটোই একই পড়া দেয়)। অন্য এলিমেন্টের মাপে একই শতাংশ ভিন্ন আকৃতি দেয়।
- কিছুই সংরক্ষিত হয় না বা লিংকের প্যারামিটারে শেয়ার হয় না: রিফ্রেশ করলেই ডিফল্ট গোলাকার কার্ডে ফিরে যাবেন। সবকিছু আপনার ব্রাউজারে চলে।
সম্পর্কিত টুল
বক্সটিকেই আরেকটু সাজাতে চাইলে।