লাইভ প্রিভিউ সহ ভিজ্যুয়ালি CSS border-radius তৈরি করুন এবং প্রোডাকশন-রেডি কোড কপি করুন।

প্রিভিউ কোণের হ্যান্ডেলগুলো টেনে নিন
CSS
border-radius: ;

১০০% ব্যক্তিগত — সবকিছু আপনার ব্রাউজারেই চলে। কিছুই আপলোড হয় না।

সব কোণ
px
px
উপাদান
প্রিসেট

CSS বর্ডার রেডিয়াস জেনারেটর সম্পর্কে

CSS Border Radius Generator নরমভাবে গোলাকার কার্ড থেকে শুরু করে জৈব-আকৃতির ব্লব পর্যন্ত সবকিছু তৈরি করে। প্রিভিউতে সরাসরি কর্নার হ্যান্ডল টেনে নিন, বা প্রতিটি কোণ সংখ্যাগতভাবে সেট করুন — সম্পূর্ণ আট-মানের সিনট্যাক্স সহ, যেখানে প্রতিটি কোণের আলাদা অনুভূমিক ও উল্লম্ব রেডিয়াস থাকে। সেই দ্বিতীয় অক্ষটিই ডিম, পাতা, অশ্রু ও ব্লব আনলক করে।

একটি link-corners টগল সব চারটি কোণকে সমন্বিত রাখে ক্লাসিক অভিন্ন গোলাকৃতির জন্য, আর আনলিঙ্ক করলে প্রতিটি কোণ অসম আকৃতির জন্য স্বাধীন হয়ে যায়। বারোটি প্রিসেট — rounded, pill, circle, squircle, দুটি blob, leaf, egg, arch, teardrop, petal এবং wave — দেখায় এই প্রপার্টিটি কী করতে পারে, এবং একটি র‍্যান্ডমাইজ বাটন অবিরাম নতুন জৈব আকৃতি তৈরি করে।

আপনি ইউনিট বদলাতে পারেন, আপনার ডিজাইনের সাথে মেলাতে এলিমেন্ট ও ক্যানভাসের রঙ বদলাতে পারেন, এবং খালি border-radius মান বা একটি সম্পূর্ণ CSS নিয়ম কপি করতে পারেন। টুলটি ১০০% ক্লায়েন্ট-সাইড — কিছুই আপলোড হয় না।

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

  1. প্রিভিউতে কর্নার হ্যান্ডল টেনে নিন, বা প্রতিটি কোণ আলাদাভাবে সম্পাদনা করতে “Link all corners” বন্ধ করুন।
  2. জৈব, ব্লব-সদৃশ আকৃতির জন্য প্রতি কোণে অনুভূমিক ও উল্লম্ব রেডিয়াস সেট করুন।
  3. আপনার ইউনিট বেছে নিন এবং প্রসঙ্গ অনুযায়ী প্রিভিউ করতে এলিমেন্ট ও পটভূমির রঙ ঠিক করুন।
  4. প্রিসেট চেষ্টা করুন — pill, squircle, blob, leaf, teardrop এবং আরও — অথবা র‍্যান্ডমাইজ চাপুন।
  5. border-radius মান বা সম্পূর্ণ CSS কপি করুন।

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

স্ল্যাশের আগের মানগুলো চারটি কোণের অনুভূমিক রেডিয়াস; পরের মানগুলো উল্লম্ব রেডিয়াস। প্রতিটি কোণে দুই অক্ষকে আলাদা করা একটি সাধারণ গোলাকার বাক্সকে ডিম, পাতা বা ব্লবে রূপান্তরিত করে।

একটি বৃত্তের জন্য, border-radius: 50% সহ একটি বর্গাকার এলিমেন্ট ব্যবহার করুন। একটি পিলের জন্য, যেকোনো আয়তক্ষেত্রকে তার উচ্চতার অন্তত অর্ধেক রেডিয়াস দিন — circle ও pill প্রিসেট উভয়ই সাথে সাথে সেট করে দেয়।

হ্যাঁ — border-radius এলিমেন্টের বাক্স ক্লিপ করে, পটভূমি ছবি সহ, এবং overflow: hidden সেই ক্লিপকে চাইল্ড কন্টেন্ট পর্যন্ত বাড়িয়ে দেয়। একটি img এলিমেন্টে ব্লব রেডিয়াস প্রয়োগ করা জৈব ফটো মাস্ক পাওয়ার একটি দ্রুত উপায়।

হ্যাঁ, border-radius CSS ট্রানজিশনের সাথে মসৃণভাবে ইন্টারপোলেট হয় যখন উভয় অবস্থার ইউনিট সামঞ্জস্যপূর্ণ। hover-এ দুটি ব্লব মানের মধ্যে অ্যানিমেট করা একটি জনপ্রিয় জৈব মরফিং ইফেক্ট — এখানে উভয় অবস্থা তৈরি করুন এবং তাদের মধ্যে ট্রানজিশন করুন।

হ্যাঁ, সম্পূর্ণ ফ্রি এবং প্রাইভেট: এটি শুধু আপনার ব্রাউজারে চলে, কোনো অ্যাকাউন্ট বা ডেটা প্রেরণ ছাড়াই।

শেয়ার করুন

জনপ্রিয় অনুসন্ধান
css বর্ডার রেডিয়াস জেনারেটর বর্ডার রেডিয়াস জেনারেটর ফ্যান্সি বর্ডার রেডিয়াস জেনারেটর css গোলাকার কোণ জেনারেটর border radius css অনলাইন টুল এলিপটিক্যাল বর্ডার রেডিয়াস জেনারেটর css ব্লব শেপ জেনারেটর বর্ডার রেডিয়াস প্রিভিউ টুল
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।
সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।