Border Radius জেনারেটর
নতুনদৃশ্যত CSS গোলাকার কোণ ও জৈব blob আকৃতি তৈরি করুন।
Runs entirely in your browser. Nothing is uploaded.
লাইভ প্রিভিউসহ ভিজ্যুয়ালি CSS রাউন্ডেড কর্নার ডিজাইন করুন
border-radius CSS প্রপার্টি আধুনিক UI-তে সবচেয়ে বেশি ব্যবহৃত নিয়মগুলোর একটি — এটি কার্ড, অ্যাভাটার, বাটন, ব্যাজ, টুলটিপ এবং ডেকোরেটিভ ব্লবের আকার দেয়। এই ফ্রি CSS বর্ডার-রেডিয়াস জেনারেটর আপনাকে একটি লাইভ ভিজ্যুয়াল এডিটর দেয় যেখানে প্রতিটি স্লাইডার সমন্বয় সাথে সাথে একটি প্রিভিউ এলিমেন্টে প্রতিফলিত হয়, তাই জেনারেট করা CSS কপি করার আগে আপনি ঠিক যে রেডিয়াসটি চান তা টিউন করে বাস্তবিক ফলাফলে দেখতে পারবেন।
চারটি কর্নার আলাদাভাবে সমন্বয় করুন বা এক-সমান রাউন্ডিংয়ের জন্য একসাথে লিংক করুন। px (নির্দিষ্ট পিক্সেল সাইজ) এবং % (এলিমেন্টের ডাইমেনশনের সাপেক্ষে) এককের মধ্যে টগল করুন। তাৎক্ষণিক সাধারণ প্যাটার্নের জন্য প্রিসেট শেপ লাইব্রেরি ব্যবহার করুন, এক ক্লিকে অর্গানিক ব্লব শেপ জেনারেট করুন, অথবা আসল কনটেন্টে রেডিয়াস প্রিভিউ করতে নিজের ইমেজ আপলোড করুন — সবকিছু সম্পূর্ণভাবে আপনার ব্রাউজারে প্রসেস হয়, কোনো সার্ভারে কিছু আপলোড হয় না।
শেপ প্রিসেট: সার্কেল, পিল, কার্ড, এগ এবং আরও
প্রিসেট লাইব্রেরি ডেভেলপাররা সবচেয়ে ঘন ঘন যেসব শেপ খোঁজেন তা কভার করে। Circle (border-radius: 50%) যেকোনো স্কয়ার এলিমেন্টকে একটি নিখুঁত বৃত্তে পরিণত করে — অ্যাভাটার ছবি, প্রোফাইল ইমেজ এবং আইকন কন্টেইনারের স্ট্যান্ডার্ড। Pill (9999px) এলিমেন্টের সাইজ নির্বিশেষে ছোট দিকগুলোকে নিখুঁত অর্ধবৃত্তে সংকুচিত করে, বাস্তবিকভাবে প্রতিটি আধুনিক ডিজাইন সিস্টেমে পাওয়া যায় এমন ক্লাসিক CTA বাটন বা ট্যাগ শেপ তৈরি করে।
Card (16px) এবং Slight (6px) বেশিরভাগ UI কিট ও কম্পোনেন্ট লাইব্রেরিতে ব্যবহৃত রাউন্ডিং মানের সাথে মেলে। Top-round এবং Bottom-round সেকশন সেপারেটর, স্ট্যাকড লিস্ট আইটেম, এবং ট্যাব বারের জন্য উপযোগী যেখানে শুধু একদিক রাউন্ড হওয়া উচিত। Egg প্রিসেট পূর্ণ ৮-মান এলিপটিক্যাল স্ল্যাশ সিনট্যাক্স ব্যবহার করে — border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% — প্রতিটি কর্নারে একটি অ্যাসিমেট্রিক কার্ভ তৈরি করে, অর্গানিক হিরো আর্ট এবং ইলাস্ট্রেশন-স্টাইল ব্লবের জন্য একটি জনপ্রিয় ভিত্তি।
ইনভার্টেড, কনকেভ এবং নচড কর্নার
একটি ঘন ঘন সার্চ হলো ইনভার্টেড বর্ডার রেডিয়াস জেনারেটর — বাইরের বদলে ভেতরের দিকে বাঁকা কর্নার। সাধারণ border-radius শুধু কনভেক্স (বাইরের দিকে) কার্ভ তৈরি করতে পারে, তাই সত্যিকারের কনকেভ কর্নারের জন্য ভিন্ন একটি কৌশল দরকার। সবচেয়ে নির্ভরযোগ্য পদ্ধতি হলো একটি radial-gradient মাস্ক: আপনি যে কর্নারে ভেতরের দিকে কামড় বসাতে চান সেখানে একটি ছোট স্বচ্ছ বৃত্ত রাখা, যা বাকি অংশ শক্ত রেখে এলিমেন্ট থেকে একটি কনকেভ নচ খোদাই করে। এভাবেই টিকেট স্টাব, কুপনের কিনারা এবং ট্যাব শেপ তাদের ভেতরের দিকে বাঁকা কার্ভ পায়।
একটি বিকল্প হলো একটি পজিশনড সিউডো-এলিমেন্ট (::before বা ::after) পেজের ব্যাকগ্রাউন্ড রঙে রঙ করে এবং নিজস্ব বাইরের border-radius দিয়ে, তারপর একটি কর্নারের ওপর লেয়ার করা যাতে এটি ভেতরের দিকে কাটছে বলে মনে হয়। স্ক্যালোপড বা পারফোরেটেড কিনারার জন্য — যেমন টিকেটের ছেঁড়ার রেখা — একদিকে একটি রিপিটিং radial-gradient মাস্ক কাজটি করে। এই জেনারেটর স্ট্যান্ডার্ড কনভেক্স রেডিয়াস এবং অর্গানিক ব্লবের ওপর ফোকাস করলেও, মাস্ক ট্রিকটি জানা থাকলে css inverted border radius generator সার্চের পেছনের কনকেভ ক্ষেত্রগুলো কভার করা যায়।
cssmatic.com, css-tricks.com, এবং bennettfeely.com-কে কেন এই জেনারেটর ছাড়িয়ে যায়
cssmatic.com একটি বেসিক বর্ডার-রেডিয়াস জেনারেটর দেয় কিন্তু বছরের পর বছর আপডেট হয়নি — এতে ইমেজ আপলোড, ব্লব র্যান্ডমাইজেশন এবং আধুনিক প্রিসেট শেপের অভাব রয়েছে। css-tricks.com almanac চমৎকার রেফারেন্স ডকুমেন্টেশন কিন্তু একটি ইন্টারঅ্যাক্টিভ টুল নয়। bennettfeely.com-এর clip-path maker জটিল পলিগন শেপের জন্য শক্তিশালী কিন্তু border-radius-এর বদলে CSS clip-path টার্গেট করে, স্বজ্ঞাত স্লাইডারের বদলে SVG-স্টাইল কো-অর্ডিনেট ইনপুট প্রয়োজন।
UtiloKit-এর বর্ডার-রেডিয়াস জেনারেটর একটি টুলে সবকিছু একত্র করে: একটি স্লাইডার-ভিত্তিক লাইভ এডিটর, সব সাধারণ UI শেপ কভার করা একটি প্রিসেট লাইব্রেরি, অ্যাডভান্সড ৮-মান স্ল্যাশ সিনট্যাক্স ব্যবহার করে র্যান্ডম ব্লব জেনারেশন, px/% ইউনিট সুইচিং, ১০০% ক্লায়েন্ট-সাইডে প্রসেস করা একটি ইমেজ আপলোড প্রিভিউ, এবং তিনটি আউটপুট ফরম্যাট (CSS প্রপার্টি, শুধু মান, এবং React ইনলাইন স্টাইল)। কোনো বিজ্ঞাপন নেই, কোনো ওয়াটারমার্ক নেই, কোনো অ্যাকাউন্ট দরকার নেই, এবং কোনো ইমেজ বা ডিজাইন ডেটা কোনো সার্ভারে পাঠানো হয় না — আপনার ছবি কখনও কোনো ব্যাকএন্ড সার্ভারে স্পর্শ করে না।
px বনাম % বনাম ব্লব: সঠিক পদ্ধতি বেছে নেওয়া
এলিমেন্টের ডাইমেনশন নির্বিশেষে একটি সামঞ্জস্যপূর্ণ কর্নার সাইজ চাইলে px ব্যবহার করুন — কার্ড, ইনপুট, মোডাল এবং ড্রপডাউন মেনুর মতো ডিজাইন-সিস্টেম কম্পোনেন্টের স্ট্যান্ডার্ড যেখানে কর্নার সাইজ একটি নির্দিষ্ট ডিজাইন টোকেন। শেপটি এলিমেন্টের সাথে সামঞ্জস্যপূর্ণ থাকা উচিত হলে % ব্যবহার করুন — 50% সবসময় একটি স্কয়ার এলিমেন্টে একটি বৃত্ত এবং একটি রেক্টাঙ্গেলে একটি সঠিক এলিপস তৈরি করে, এলিমেন্টের প্রকৃত পিক্সেল ডাইমেনশন নির্বিশেষে।
ডেকোরেটিভ ব্লব শেপের জন্য, Random Blob ক্লিক করুন border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%-এর মতো একটি অ্যাসিমেট্রিক ৮-মান CSS মান জেনারেট করতে। প্রতিটি ক্লিক একটি ভিন্ন অর্গানিক ফর্ম তৈরি করে। আপনার পছন্দমতো একটি ব্লব দেখার পর, CSS কপি করুন এবং ব্যাকগ্রাউন্ড এলিমেন্ট, ডেকোরেটিভ ডিভাইডার, বা অ্যাবস্ট্র্যাক্ট হিরো ইলাস্ট্রেশনে প্রয়োগ করুন। ব্লব ফিচারটি স্ল্যাশ সিনট্যাক্স ব্যবহার করে যেখানে অনুভূমিক ও উলম্ব রেডিয়াস প্রতি কর্নারে ভিন্ন, শুধু ৪-মান শর্টহ্যান্ড দিয়ে তৈরি করা অসম্ভব এমন শেপ তৈরি করে।
নিজের ইমেজ দিয়ে প্রিভিউ করুন — ক্লায়েন্ট-সাইড, প্রাইভেট, তাৎক্ষণিক
আপনার border-radius আসল ইমেজে কেমন দেখায় তা পরীক্ষা করতে সরাসরি প্রিভিউ এরিয়ায় যেকোনো ছবি আপলোড করুন। ইমেজটি ব্রাউজারের File API ব্যবহার করে লোড হয় এবং একটি লোকাল অবজেক্ট URL ব্যবহার করে রেন্ডার হয় — এটি কখনও আপনার ডিভাইস ছেড়ে যায় না। কোনো আপলোড নেই, সার্ভার প্রসেসিং নেই, ক্লাউড স্টোরেজ নেই। এটি বিশেষভাবে উপযোগী যখন আপনি সার্কুলার অ্যাভাটার, রাউন্ডেড মিডিয়া থাম্বনেইল, বা গ্যালারি কার্ড ডিজাইন করছেন যেখানে সঠিক ক্লিপ শেপ গুরুত্বপূর্ণ এবং কোডে প্রয়োগ করার আগে ক্রপটি যাচাই করতে চান।
CSS-এ, একটি ছবি রাউন্ড করা দুইভাবে কাজ করে: সরলতার জন্য সরাসরি <img> ট্যাগে border-radius প্রয়োগ করুন, অথবা বেশি লেআউট নমনীয়তার জন্য overflow: hidden-সহ একটি র্যাপার <div> ব্যবহার করুন। র্যাপার পদ্ধতি আপনাকে বাইরের এলিমেন্টে অ্যাসপেক্ট রেশিও, প্যাডিং এবং পজিশনিং নিয়ন্ত্রণ করতে দেয় যখন border-radius ওভারফ্লো ক্লিপ করে। উভয় পদ্ধতিই জেনারেট করা CSS আউটপুটে প্রদর্শিত।
ক্রস-ডিভাইস: ডেস্কটপ, আইফোন, অ্যান্ড্রয়েড এবং যেকোনো আধুনিক ব্রাউজার
বর্ডার-রেডিয়াস জেনারেটর ইনস্টলেশন ছাড়াই যেকোনো আধুনিক ব্রাউজারে চলে। ডেস্কটপে, পূর্ণ তিন-কলাম লেআউট আপনাকে বাঁদিকে স্লাইডার, মাঝখানে একটি বড় লাইভ প্রিভিউ, এবং ডানদিকে জেনারেট করা CSS দেয়। আইফোন এবং অ্যান্ড্রয়েডে, লেআউট রেসপন্সিভভাবে একটি একক-কলাম উলম্ব স্ট্যাকে ভাঁজ হয় যা সম্পূর্ণ টাচ-ফ্রেন্ডলি। স্লাইডারগুলো টাচ-ড্র্যাগ জেসচারে সাড়া দেয়, ইমেজ পিকার আপনার ডিভাইসের নেটিভ ফাইল ব্রাউজারের সাথে ইন্টিগ্রেট হয়, এবং কপি বাটন সব আধুনিক মোবাইল ব্রাউজার সমর্থিত Web Clipboard API ব্যবহার করে।
কিছুই ইনস্টল করা নেই, কিছুতেই সাইন-ইন করা নেই, এবং কোথাও রেট-লিমিট নেই। টুলটি ক্লায়েন্ট-সাইড JavaScript ব্যবহার করে সব ইনপুট স্থানীয়ভাবে প্রসেস করে — স্লাইডার শূন্য নেটওয়ার্ক ল্যাটেন্সিতে প্রিভিউ আপডেট করে কারণ কোনো সার্ভার জড়িত নেই। যেকোনো প্রজেক্টের জন্য border-radius মান জেনারেট করুন — ব্যক্তিগত সাইট, ক্লায়েন্ট কাজ, ডিজাইন হ্যান্ডঅফ, বা CSS শেখা — সম্পূর্ণ প্রাইভেসি এবং কোনো ঘর্ষণ ছাড়াই।
CSS Border-Radius-এর গণিত: এলিপটিক্যাল কর্নার এবং স্ল্যাশ সিনট্যাক্স
ভেতরে, border-radius চারটি স্বাধীন লংহ্যান্ড প্রপার্টির শর্টহ্যান্ড: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, এবং border-bottom-left-radius। বেশিরভাগ ডেভেলপার যা মিস করেন তা হলো এই লংহ্যান্ডগুলোর প্রতিটি দুটি মান নেয় — একটি অনুভূমিক রেডিয়াস এবং একটি উলম্ব রেডিয়াস — যা ব্রাউজার একটি বৃত্তের চতুর্থাংশের বদলে একটি এলিপসের চতুর্থাংশ আঁকতে ব্যবহার করে। border-top-left-radius: 30px 60px লেখা টপ-লেফট কর্নারে একটি ৩০ px অনুভূমিক সুইপ এবং ৬০ px উলম্ব সুইপসহ একটি এলিপটিক্যাল আর্ক রাখে, যা একটি সাধারণ বৃত্তাকার আর্কের বদলে স্পষ্টভাবে চ্যাপ্টা বা প্রসারিত কার্ভ তৈরি করে।
শর্টহ্যান্ডটি একটি স্ল্যাশ সেপারেটরের মাধ্যমে এই এলিপটিক্যাল নিয়ন্ত্রণ প্রকাশ করে: স্ল্যাশের বাঁদিকে সবকিছু চারটি অনুভূমিক রেডিয়াস সংজ্ঞায়িত করে, আর ডানদিকে সবকিছু চারটি উলম্ব রেডিয়াস সংজ্ঞায়িত করে। উদাহরণস্বরূপ, border-radius: 10px 20px / 30px 40px টপ-লেফটে ১০ px অনুভূমিক এবং ৩০ px উলম্ব রেডিয়াস সেট করে, এবং বাকি কর্নারে ২০ px অনুভূমিক ও ৪০ px উলম্ব রেডিয়াস (স্ট্যান্ডার্ড টপ-লেফট → টপ-রাইট → বটম-রাইট → বটম-লেফট ঘড়ির কাঁটার দিকের নিয়ম অনুসরণ করে)। এভাবেই অর্গানিক ব্লব এবং এগ শেপ তৈরি করা হয়: border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%-এর মতো কম্বিনেশন এমন কর্নার তৈরি করে যেখানে অনুভূমিক ও উলম্ব কার্ভ ভিন্ন, হিরো সেকশন ও ডেকোরেটিভ ব্যাকগ্রাউন্ডে সর্বব্যাপী হয়ে ওঠা অনিয়মিত, আমিবা-সদৃশ আউটলাইন তৈরি করে।
শতাংশ রেজোলিউশন একটি কম স্পষ্ট নিয়ম অনুসরণ করে: শতাংশ অনুভূমিক রেডিয়াস এলিমেন্টের প্রস্থের সাপেক্ষে রিজলভ হয়, যখন শতাংশ উলম্ব রেডিয়াস এলিমেন্টের উচ্চতার সাপেক্ষে রিজলভ হয় — কর্ণের সাপেক্ষে নয়, কোনো গড়ের সাপেক্ষে নয়, এবং কোনো সাধারণ রেফারেন্স দৈর্ঘ্যের সাপেক্ষেও নয়। এর মানে হলো একটি ২০০ px × ১০০ px এলিমেন্টে border-radius: 50% ১০০ px অনুভূমিক বাই ৫০ px উলম্ব কর্নার আর্কে রিজলভ হয় — একটি বৃত্ত নয়, একটি এলিপস — এবং শুধুমাত্র একটি নিখুঁত স্কয়ার এলিমেন্টে 50% একটি প্রকৃত বৃত্ত তৈরি করে। পিল হ্যাক (border-radius: 9999px) এটি কাজে লাগায় এমন একটি বড় absolute মান দিয়ে যাতে ব্রাউজারের ওভারল্যাপ-প্রতিরোধ অ্যালগরিদম এটিকে এলিমেন্টের সাইজ নির্বিশেষে ঠিক ছোট ডাইমেনশনের অর্ধেকে ক্ল্যাম্প করে, কোনো গণনা ছাড়াই যেকোনো রেক্টাঙ্গেলে নিখুঁত অর্ধবৃত্তাকার প্রান্ত নিশ্চিত করে।
স্কুয়ার্কল, সুপারএলিপস, এবং কেন CSS রাউন্ডেড রেক্টাঙ্গেল একই জিনিস নয়
iOS 7-এর পর থেকে প্রতিটি আইফোন অ্যাপ আইকন একটি স্কুয়ার্কল — একটি শেপ যা একটি বর্গ ও বৃত্তের মাঝামাঝি জ্যামিতিকভাবে বসে, সুপারএলিপস সমীকরণ |x/a|^n + |y/b|^n = 1 দ্বারা সংজ্ঞায়িত যেখানে সূচক n ২-এর চেয়ে বেশি। যখন n = 4, ফলাফল হলো ক্যানোনিক্যাল স্কুয়ার্কল: একটি ফর্ম যার বক্রতা ক্রমাগত পরিবর্তিত হয় যা সমতল দিক থেকে কর্নারে কোনো আকস্মিক পরিবর্তন ছাড়াই মসৃণভাবে ত্বরান্বিত হয়। একটি স্ট্যান্ডার্ড CSS রাউন্ডেড রেক্টাঙ্গেল, বিপরীতে, সরল কিনারা এবং বৃত্তাকার আর্ক সেগমেন্ট জোড়া দিয়ে তৈরি — সোজা অংশ জুড়ে বক্রতা শূন্য এবং তারপর কর্নার আর্কে একটি নির্দিষ্ট মানে লাফ দেয়, একটি গাণিতিকভাবে অসংলগ্ন সীমানা তৈরি করে। সেই তীক্ষ্ণ পরিবর্তন ছোট রেডিয়াসে সূক্ষ্ম কিন্তু বড় রেডিয়াসে স্পষ্টভাবে দৃশ্যমান হয়ে ওঠে, এই কারণেই CSS-রাউন্ডেড ইন্টারফেস ফিজিক্যাল হার্ডওয়্যার এবং Apple-এর হিউম্যান ইন্টারফেস গাইডলাইনে ব্যবহৃত স্কুয়ার্কল শেপের তুলনায় সামান্য যান্ত্রিক দেখাতে পারে।
Apple ২০১৩ সালে iOS 7-এর সাথে আনুষ্ঠানিকভাবে কন্টিনিউয়াস কর্নার কার্ভেচার চালু করে, এবং Figma পরে তার শেপ এডিটরে একটি “smooth corners” টগল যোগ করে (অভ্যন্তরীণভাবে একটি স্মার্ট কর্নার রেডিয়াস বলা হয়), যা ডিজাইনারদের হাতে SVG পাথ না এঁকে একটি স্কুয়ার্কল আনুমানিক করতে দেয়। CSS-এ, শুধু border-radius দিয়ে একটি প্রকৃত স্কুয়ার্কল রেন্ডার করা যায় না কারণ প্রপার্টিটি শুধু বৃত্তাকার আর্ক সেগমেন্ট সমর্থন করে। একটি হাতে-টিউন করা SVG কিউবিক বেজিয়ার পাথসহ clip-path: path() ব্যবহার করে, বা <feTurbulence>-মুক্ত একটি সুপারএলিপস পাথসহ একটি SVG এলিমেন্ট ব্যবহার করে যুক্তিসঙ্গত আনুমানিকতা বিদ্যমান, কিন্তু এগুলোর জন্য ডিজাইন-টুল এক্সপোর্ট বা একটি JavaScript গণনা ধাপ প্রয়োজন। shape() CSS ফাংশন, বর্তমানে ব্রাউজার ফ্ল্যাগের পেছনে ড্রাফটে, ভবিষ্যতের একটি স্পেসিফিকেশন চক্রে নেটিভ CSS-এ স্কুয়ার্কল-মানের ক্রমাগত বক্রতা আনার প্রতিশ্রুতি দেয়।
ব্যবহারিক UI কাজের জন্য, স্কুয়ার্কল পার্থক্যটি সবচেয়ে বেশি গুরুত্বপূর্ণ আইকনোগ্রাফি এবং উচ্চ-দৃশ্যমানতার বাটন ডিজাইনে। শেপ রিকগনিশনের গবেষণা ইঙ্গিত দেয় যে কন্টিনিউয়াস-কার্ভেচার সীমানা ভিজ্যুয়াল সিস্টেমের জন্য কম উপলব্ধিমূলক “সিম” প্রবর্তন করে, সম্ভাব্যভাবে শেপটি বিশ্লেষণ করতে প্রয়োজনীয় নিম্ন-স্তরের জ্ঞানীয় প্রচেষ্টা কমিয়ে দেয়। তা সত্ত্বেও, ~২৭–৩০% রেডিয়াসের একটি CSS রাউন্ডেড রেক্টাঙ্গেল এবং একটি স্কুয়ার্কলের মধ্যে ভিজ্যুয়াল পার্থক্য এতটাই ছোট যে এটি খুব কমই কনভার্সন মেট্রিক প্রভাবিত করে — বেশি গুরুত্বপূর্ণ ফ্যাক্টর হলো রেডিয়াস মান আশেপাশের ডিজাইন টোকেনের সাথে সামঞ্জস্যপূর্ণ কিনা। তাই স্কুয়ার্কল দৈনন্দিন কম্পোনেন্ট রাউন্ডিংয়ের জন্য একটি প্রয়োজনীয়তার বদলে ব্র্যান্ড-ক্রিটিক্যাল সারফেসের (অ্যাপ আইকন, হিরো ইলাস্ট্রেশন, ফ্ল্যাগশিপ প্রোডাক্ট ইমেজ) জন্য একটি পরিমার্জন।
ডিজাইন সিস্টেমে বর্ডার-রেডিয়াস: রেডিয়াস টোকেন, শেপ স্কেল এবং মরফিং অ্যানিমেশন
Material Design 3 কর্নার রাউন্ডিংকে একটি আট-স্তরের শেপ স্কেল হিসেবে সংহিতাবদ্ধ করে: None (0 px), Extra Small (4 px), Small (8 px), Medium (12 px), Large (16 px), Extra Large (28 px), এবং Full (9999 px), প্রতিটি স্তর নির্দিষ্ট কম্পোনেন্ট টাইপে ম্যাপ করা — চিপ ও ব্যাজ Extra Small ব্যবহার করে, কার্ড ও ডায়ালগ Medium ব্যবহার করে, বটম শিট Large ব্যবহার করে, FAB Full ব্যবহার করে। Tailwind CSS নামযুক্ত ইউটিলিটি ক্লাসসহ একই ধরনের দর্শন অনুসরণ করে: rounded-sm (2 px), rounded (4 px), rounded-md (6 px), rounded-lg (8 px), rounded-xl (12 px), rounded-2xl (16 px), rounded-3xl (24 px), এবং rounded-full (9999 px)। উভয় সিস্টেমই একই মৌলিক পছন্দ করে: অল্প কিছু নামযুক্ত সিম্যান্টিক টোকেন, প্রতি-কম্পোনেন্ট নির্বিচার পিক্সেল মান নয়। যখন আপনি একটি জেনারেটর টুল থেকে একটি মান নেন, কাঁচা পিক্সেল সংখ্যা হার্ড-কোড করার বদলে আপনার সিস্টেমে সবচেয়ে কাছের টোকেনে ম্যাপ করুন — এটি একই ভিজ্যুয়াল ওজন শেয়ার করা কম্পোনেন্ট জুড়ে ইন্টারফেসকে সংহত রাখে।
সামঞ্জস্যপূর্ণ রেডিয়াস টোকেনের ডিজাইন যুক্তি হলো সমন্বয়: যখন একটি প্রোডাক্টের প্রতিটি এলিমেন্ট — বাটন, কার্ড, ইনপুট, মোডাল, চিপ — একই ধাপযুক্ত স্কেল থেকে তার কর্নার সাইজ আঁকে, ইন্টারফেসটি উদ্দেশ্যপূর্ণ ও একীভূত পড়া যায়। কম্পোনেন্ট জুড়ে নির্বিচার মান (3 px, 7 px, 11 px) মেশানো নিম্ন-স্তরের ভিজ্যুয়াল টেনশন তৈরি করে যা ব্যবহারকারীরা পালিশ অবনতি হিসেবে উপলব্ধি করে যদিও তারা কেন তা স্পষ্ট করতে পারে না। ইচ্ছাকৃত ব্যতিক্রম হলো ইন্টারঅ্যাক্টিভ এলিমেন্ট: বাটন, চিপ এবং টগল সাধারণত তাদের কাঠামোগত কন্টেইনার (কার্ড, প্যানেল, সাইডবার)-এর চেয়ে বড় রেডিয়াস মান ব্যবহার করে ঠিক অ্যাফোর্ডেন্স সংকেত দেওয়ার জন্য — একটি সম্পূর্ণ-রাউন্ডেড পিল বাটন একটি ধারালো-কর্নার রেক্টাঙ্গেলের চেয়ে ভিজ্যুয়ালি “ট্যাপযোগ্য” মনে হয়। এই রেডিয়াস-অ্যাজ-অ্যাফোর্ডেন্স সংকেতটি কেন বেশিরভাগ ডিজাইন সিস্টেম ইচ্ছাকৃতভাবে কম্পোনেন্ট সীমানায় সমান রাউন্ডিং ভাঙে তার কারণ।
CSS ট্রানজিশন বা GSAP-এর মতো JavaScript লাইব্রেরি দিয়ে border-radius অ্যানিমেট করা সন্তোষজনক মরফিং প্রভাবের একটি ক্যাটাগরি খোলে। একটি সাধারণ transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) hover-এ একটি কার্ডকে রেক্টাঙ্গুলার ১২ px রেডিয়াস থেকে সম্পূর্ণ সার্কুলার 50%-এ অ্যানিমেট করতে পারে, শুধু রঙের বদলে গতির সাথে একটি স্টেট পরিবর্তন জানাতে। আরও অর্গানিক নড়াচড়ার জন্য, @keyframes বিভিন্ন আট-মান স্ল্যাশ রেডিয়াস মান চক্রাকারে ঘুরতে পারে — 30% 70% 70% 30% / 30% 30% 70% 70% থেকে 70% 30% 30% 70% / 70% 70% 30% 30%-এ যাওয়া এবং ফিরে আসা — হিরো ব্যাকগ্রাউন্ড, লোডিং স্টেট এবং অ্যাবস্ট্র্যাক্ট আর্ট ডিরেকশনে জনপ্রিয় একটি ব্লব মরফিং অ্যানিমেশন তৈরি করে। যেহেতু border-radius অ্যানিমেশন প্রতি ফ্রেমে একটি রিপেইন্ট ট্রিগার করে, ক্রমাগত মরফ হওয়া এলিমেন্টে will-change: border-radius প্রয়োগ করুন, এবং সরল পেইন্ট কনটেন্টসহ (ভারী box-shadow বা জটিল ব্যাকগ্রাউন্ড ছাড়া) এলিমেন্টে অ্যানিমেট করা পছন্দ করুন ফ্রেম রেট মসৃণ রাখতে।
Frequently asked questions
CSS-এ `border-radius: 50%` কী করে?
এটি একটি স্কয়ার এলিমেন্টকে একটি নিখুঁত বৃত্তে পরিণত করে। একটি সত্যিকারের বৃত্তের জন্য, এলিমেন্টের সমান প্রস্থ ও উচ্চতা থাকতে হবে — উদাহরণস্বরূপ `width: 100px; height: 100px; border-radius: 50%`। ৫০% রেডিয়াস চার দিকেই মাঝখানে মেলে, একটি নিখুঁত কার্ভ তৈরি করে। একটি নন-স্কয়ার এলিমেন্টে, ৫০% বদলে একটি এলিপস তৈরি করে — এলিমেন্টের ডাইমেনশন অনুযায়ী চওড়া বা লম্বা। CSS-এ সার্কুলার অ্যাভাটার ইমেজ, রাউন্ড বাটন এবং আইকন কন্টেইনার তৈরির সবচেয়ে সাধারণ উপায় এটি।
CSS-এ কীভাবে একটি পিল বা স্টেডিয়াম শেপ বানাবো?
একটি নন-স্কয়ার এলিমেন্টে (যেমন একটি বাটন বা ব্যাজ) `border-radius: 9999px` (বা 100px-এর মতো যেকোনো খুব বড় মান) ব্যবহার করুন। ব্রাউজার স্বয়ংক্রিয়ভাবে রেডিয়াসকে এলিমেন্টের ছোট ডাইমেনশনের অর্ধেকে ক্ল্যাম্প করে, তাই ছোট প্রান্তগুলো নিখুঁত অর্ধবৃত্ত হয়ে যায় যখন লম্বা দিকগুলো সোজা থাকে। এটি বেশিরভাগ আধুনিক ডিজাইন সিস্টেমে দেখা ক্লাসিক পিল-আকৃতির CTA বাটন তৈরি করে। `9999px` ট্রিকটি এলিমেন্টের সাইজ নির্বিশেষে কাজ করে — উচ্চতার অর্ধেক হাতে গণনা করার দরকার নেই। এই জেনারেটরের Pill প্রিসেট এই প্যাটার্ন সাথে সাথে প্রয়োগ করে।
border-radius-এর জন্য px এবং %-এর মধ্যে পার্থক্য কী?
পিক্সেল মান absolute — এলিমেন্টের সাইজ নির্বিশেষে একটি `12px` রেডিয়াস 12 পিক্সেলই থাকে। এলিমেন্ট বড় বা ছোট হলে, কর্নার সাইজ স্থির থাকে। শতাংশ মান আপেক্ষিক — `50%` সবসময় প্রতিটি দিকের ঠিক মাঝবিন্দু পর্যন্ত বাঁকে, এলিমেন্টের সাথে স্কেল করা একটি সমানুপাতিক শেপ তৈরি করে। বৃত্ত ও পিলের মতো শেপের জন্য শতাংশ (`50%`) ব্যবহার করুন যা এলিমেন্টের সাথে স্কেল করা উচিত। কার্ড, বাটন এবং ইনপুটের মতো UI কম্পোনেন্টের জন্য পিক্সেল ব্যবহার করুন যেখানে কনটেন্ট নির্বিশেষে একটি সামঞ্জস্যপূর্ণ, ডিজাইন-সিস্টেম-নির্ধারিত কর্নার সাইজ চান।
CSS-এ কীভাবে একটি ইনভার্টেড বা কনকেভ বর্ডার রেডিয়াস বানাবো?
একটি স্ট্যান্ডার্ড `border-radius` শুধু কর্নার বাইরের দিকে (কনভেক্স) বাঁকায়। একটি ইনভার্টেড বা কনকেভ কর্নারের জন্য — টিকিট, ট্যাব এবং স্পিচ বাবলে ব্যবহৃত ভেতরের দিকে 'নচ' বা 'কাট-আউট' কার্ভ — শুধু `border-radius` ব্যবহার করা যাবে না। সাধারণ কৌশলটি একটি radial-gradient মাস্ক: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, আপনি যে প্রতিটি কর্নারে ভেতরের দিকে কামড় বসাতে চান তার জন্য পুনরাবৃত্ত। একটি বিকল্প হলো পেজের ব্যাকগ্রাউন্ড রঙসহ একটি পজিশনড সিউডো-এলিমেন্ট (`::before`) এবং নিজস্ব বাইরের `border-radius`, কর্নারের ওপর লেয়ার করা যাতে এটি একটি কনকেভ শেপ খোদাই করে। টিকিট-স্টাব প্রান্তের জন্য, একদিকে একটি রিপিটিং radial-gradient মাস্ক স্ক্যালোপড পারফোরেশন তৈরি করে। তাই 'ইনভার্টেড বর্ডার রেডিয়াস' আসলে border-radius মানের বদলে একটি মাস্কিং ট্রিক — একটি ইনভার্টেড বর্ডার রেডিয়াস জেনারেটর খোঁজার সময় জানা উপযোগী।
CSS-এ শুধু একটি বা দুটি নির্দিষ্ট কর্নার কীভাবে রাউন্ড করব?
পৃথক কর্নার প্রপার্টি ব্যবহার করুন: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, বা `border-bottom-left-radius`। উদাহরণস্বরূপ, `border-bottom-right-radius: 24px` শুধু নিচের-ডান কর্নার রাউন্ড করে, বাকি তিনটি ধারালো রেখে। আপনি এগুলো স্বাধীনভাবে একত্র করতে পারেন: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` একটি তির্যকভাবে-রাউন্ড শেপ তৈরি করে। শর্টহ্যান্ডে, দুটি মান বিপরীত কর্নার জোড়া সেট করে: `border-radius: 16px 0` উপরের-বাঁ ও নিচের-ডান কর্নার রাউন্ড করে, উপরের-ডান ও নিচের-বাঁ ধারালো রেখে।
চারটি border-radius মানের শর্টহ্যান্ড অর্ডার কী?
উপরের-বাঁ থেকে ঘড়ির কাঁটার দিকে: Top-left → Top-right → Bottom-right → Bottom-left। তাই `border-radius: 16px 8px 0 8px` উপরের-বাঁ ১৬px, উপরের-ডান ৮px, নিচের-ডান ০, এবং নিচের-বাঁ ৮px দেয়। এটি `margin`, `padding` এবং `border-width`-এর ব্যবহৃত স্ট্যান্ডার্ড CSS শর্টহ্যান্ড দিকের সাথে মেলে। দুটি মান দিয়ে, প্রথমটি উপরের-বাঁ ও নিচের-ডানে প্রযোজ্য; দ্বিতীয়টি উপরের-ডান ও নিচের-বাঁয়ে। তিনটি মান দিয়ে, দ্বিতীয়টি উপরের-ডান ও নিচের-বাঁ উভয়ে প্রযোজ্য। একটি মান চারটি কর্নারে সমানভাবে প্রযোজ্য।
একটি ইমেজে border-radius প্রয়োগ করে সার্কুলার বা রাউন্ড বানাতে পারি?
হ্যাঁ — সরাসরি `<img>` এলিমেন্টে `border-radius` প্রয়োগ করুন: একটি সার্কুলার অ্যাভাটারের জন্য `img { border-radius: 50%; width: 100px; height: 100px; }`। বিকল্পভাবে, `overflow: hidden`-সহ একটি `<div>`-এ ইমেজ র্যাপ করুন এবং র্যাপারে border-radius প্রয়োগ করুন, যা আপনাকে আরও লেআউট নিয়ন্ত্রণ দেয়। CSS কপি করার আগে আপনার আসল ছবিতে রেডিয়াসটি কেমন দেখায় তা প্রিভিউ করতে এই টুলের ইমেজ আপলোড ফিচার ব্যবহার করুন। এটি বিশেষভাবে উপযোগী অ্যাভাটার ক্রপ, মিডিয়া কার্ড থাম্বনেইল, এবং গ্যালারি লেআউটের জন্য যেখানে সঠিক ক্লিপ শেপ ডিজাইনকে প্রভাবিত করে।
CSS দিয়ে একটি টিয়ারড্রপ বা ড্রপলেট শেপ কীভাবে বানাবো?
তিনটি কর্নার একটি বড় মানে সেট করুন এবং একটিকে শূন্যে রাখুন: `border-radius: 50% 50% 50% 0`। `transform: rotate(-45deg)`-এর সাথে মিলিয়ে, এটি ক্লাসিক ম্যাপ-পিন ড্রপলেট শেপ তৈরি করে। ড্রপলেটকে বিভিন্ন দিকে নির্দেশ করতে কোন কর্নার শূন্য তা সমন্বয় করুন: `0 50% 50% 50%` বাঁদিকে নির্দেশ করে, `50% 0 50% 50%` ডানদিকে নির্দেশ করে। শূন্যের কর্নার তীক্ষ্ণ প্রান্ত তৈরি করে; তিনটি বড়-রেডিয়াস কর্নার গোলাকার শরীর তৈরি করে। লোকেশন মার্কার, পয়েন্টার এবং ইলাস্ট্রেশন-স্টাইল UI-তে ডেকোরেটিভ অ্যাকসেন্টের জন্য উপযোগী।
স্ল্যাশসহ ৮-মান border-radius সিনট্যাক্স কী?
স্ল্যাশটি প্রতিটি কর্নারের জন্য অনুভূমিক ও উলম্ব রেডিয়াস আলাদা করে। সিনট্যাক্সটি: `border-radius: [horizontal radii] / [vertical radii]`। উদাহরণস্বরূপ, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` একটি ডিমের মতো শেপ তৈরি করে যেখানে প্রতিটি কর্নারে একটি অ্যাসিমেট্রিক এলিপটিক্যাল কার্ভ থাকে। এই টুলের Random Blob জেনারেটর অর্গানিক, অ্যাসিমেট্রিক শেপ তৈরি করতে এই সিনট্যাক্স ব্যবহার করে — হিরো সেকশন ব্যাকগ্রাউন্ড, ডেকোরেটিভ ব্লব এবং ইলাস্ট্রেশন-স্টাইল ডিজাইন এলিমেন্টে জনপ্রিয়। প্রতিটি কর্নারে ভিন্ন অনুভূমিক-থেকে-উলম্ব রেডিয়াস অনুপাত থাকতে পারে।
cssmatic.com বা css-tricks.com টুলের সাথে এই বর্ডার-রেডিয়াস জেনারেটরের তুলনা কেমন?
cssmatic.com-এর border-radius টুল কার্যকর কিন্তু পুরনো — এতে ইমেজ আপলোড, ব্লব জেনারেশন এবং প্রিসেট লাইব্রেরির অভাব আছে। css-tricks.com almanac চমৎকার ডকুমেন্টেশন কিন্তু একটি ইন্টারঅ্যাক্টিভ জেনারেটর নয়। bennettfeely.com-এর clip-path maker ব্যবহারের ক্ষেত্রে ওভারল্যাপ করে কিন্তু border-radius-এর বদলে clip-path টার্গেট করে। UtiloKit-এর জেনারেটর প্রদান করে: ইমেজ আপলোডসহ লাইভ প্রিভিউ (সম্পূর্ণভাবে ক্লায়েন্ট-সাইডে প্রসেস করা), শেপ প্রিসেট (সার্কেল, পিল, কার্ড, এগ, ব্লব), ৮-মান স্ল্যাশ সিনট্যাক্স ব্যবহার করে র্যান্ডম ব্লব জেনারেশন, px/% ইউনিট টগল, এবং তিনটি কপি ফরম্যাট। কোনো বিজ্ঞাপন নেই, কোনো ওয়াটারমার্ক নেই, কোনো সাইন-আপ নেই, এবং কোনো সার্ভারে কিছু পাঠানো হয় না।
আমার আপলোড করা ইমেজ কি কোনো সার্ভারে পাঠানো হয়?
না — ইমেজটি শুধুমাত্র ব্রাউজারের File API ব্যবহার করে লোড হয় এবং কখনও আপনার ডিভাইস ছেড়ে যায় না। প্রিভিউ এলিমেন্ট একটি `createObjectURL()` কল ব্যবহার করে ইমেজটি স্থানীয়ভাবে রেন্ডার করে যা সম্পূর্ণভাবে ব্রাউজার মেমরিতে থাকে। কোনো আপলোড নেই, সার্ভার প্রসেসিং নেই, ক্লাউড স্টোরেজ নেই। একই ক্লায়েন্ট-সাইড আর্কিটেকচার অন্য সব ফিচারের ক্ষেত্রেও প্রযোজ্য: স্লাইডার ইনপুট, CSS জেনারেশন, ব্লব র্যান্ডমাইজেশন, এবং ক্লিপবোর্ড কপিং — সবই পেজ লোডের পর কোনো নেটওয়ার্ক রিকোয়েস্ট ছাড়াই JavaScript-এ চলে। আপনার ইমেজ ও ডিজাইন কাজ সম্পূর্ণভাবে প্রাইভেট থাকে।
CSS-এ কি border-radius ট্রানজিশন অ্যানিমেট করা যায়?
`border-radius` CSS ট্রানজিশন এবং কিফ্রেম অ্যানিমেশনের মাধ্যমে সম্পূর্ণভাবে অ্যানিমেটেবল। hover-এ দুটি মানের মধ্যে মসৃণভাবে ইন্টারপোলেট করতে `transition: border-radius 0.3s ease` ব্যবহার করুন। শেপের মধ্যে ক্রমাগত মরফ করতে `@keyframes` ব্যবহার করুন — `0` থেকে `50%`-এ অ্যানিমেট করা একটি স্কয়ারকে একটি বৃত্তে স্পন্দিত করে তোলে। দুটি ব্লব শেপের মধ্যে মরফিং (ভিন্ন ৮-মান স্ল্যাশ মান) হিরো ব্যাকগ্রাউন্ডে জনপ্রিয় প্রবাহমান, অর্গানিক অ্যানিমেশন তৈরি করে। মনে রাখবেন border-radius অ্যানিমেট করলে প্রতি ফ্রেমে একটি রিপেইন্ট ট্রিগার হয়, তাই ঘন ঘন অ্যানিমেট হওয়া এলিমেন্টে `will-change: border-radius` ব্যবহার করুন।
border-radius কি এলিমেন্টের ক্লিক এরিয়া বা CSS লেআউট প্রভাবিত করে?
`border-radius` সম্পূর্ণভাবে ভিজ্যুয়াল — এটি এলিমেন্টের পেইন্ট করা চেহারা ক্লিপ করে কিন্তু এর লেআউট বক্স, মার্জিন এরিয়া, বা পয়েন্টার ইভেন্ট হিট এরিয়া পরিবর্তন করে না। অদৃশ্য চৌকো কর্নারগুলো এখনও ক্লিকযোগ্য থাকে এবং এখনও তাদের লেআউট স্পেস দখল করে। টাচ ইন্টারফেসের জন্য এটি জানা গুরুত্বপূর্ণ: একটি সার্কুলার বাটনেও তার কর্নারে একটি চৌকো ক্লিকযোগ্য অঞ্চল থাকে। হিট এরিয়া নিখুঁতভাবে রাউন্ডেড শেপ অনুসরণ করতে চাইলে, বদলে `clip-path: circle()` ব্যবহার করুন, যা পয়েন্টার ইভেন্টও ক্লিপ করে। `box-shadow` সঠিকভাবে `border-radius` অনুসরণ করে; বেশিরভাগ ব্রাউজারে `outline` করে না — রাউন্ডেড ফোকাস রিং বিকল্প হিসেবে `box-shadow: 0 0 0 3px color` ব্যবহার করুন।
এই CSS বর্ডার-রেডিয়াস জেনারেটর কি মোবাইলে কাজ করে — আইফোন এবং অ্যান্ড্রয়েড?
হ্যাঁ — টুলটি সম্পূর্ণ রেসপন্সিভ এবং যেকোনো আধুনিক মোবাইল ব্রাউজারে কাজ করে। আইফোনে, কিছু ইনস্টল না করেই Safari বা Chrome-এ এটি ব্যবহার করুন। অ্যান্ড্রয়েডে, Chrome, Firefox এবং Edge সবই কাজ করে। স্লাইডারগুলো যথাযথ আকারের ড্র্যাগ হ্যান্ডলসহ টাচ-ফ্রেন্ডলি। ইমেজ আপলোড মোবাইলে নেটিভ ফাইল পিকার ব্যবহার করে, আপনার ক্যামেরা রোল বা ফাইলস অ্যাপ থেকে বেছে নিতে দেয়। ক্লিপবোর্ডে CSS কপি করা স্ট্যান্ডার্ড Web Clipboard API-এর মাধ্যমে কাজ করে যা সব আধুনিক মোবাইল ব্রাউজারে সমর্থিত। পুরো টুলটি ক্লায়েন্ট-সাইডে চলে, তাই কোনো অ্যাপ ডাউনলোড নেই, কোনো অ্যাকাউন্ট নেই, এবং কোথাও ডেটা পাঠানো হয় না।
Related tools
সব টুল দেখুন
নতুন Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
কালার পিকার ও কনভার্টার
একটি রঙ বেছে নিন এবং HEX, RGB, HSL ও OKLCH-এ রূপান্তর করুন।
নতুন কালার কনট্রাস্ট চেকার
টেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG AA/AAA কনট্রাস্ট অনুপাত যাচাই করুন।
নতুন CSS গ্রেডিয়েন্ট জেনারেটর
লাইভ প্রিভিউ সহ linear, radial ও conic CSS গ্রেডিয়েন্ট তৈরি করুন।
নতুন CSS Box-Shadow জেনারেটর
প্রিসেট ও লাইভ প্রিভিউ সহ মাল্টি-লেয়ার CSS box-shadow তৈরি করুন। CSS, value বা React স্টাইল তাৎক্ষণিক কপি করুন।
নতুন কালার প্যালেট জেনারেটর
complementary, analogous, triadic ও monochromatic প্যালেট তৈরি করুন।