বৈশিষ্ট্য border-radius

বৈশিষ্ট্য border-radius সীমানা এবং পটভূমির জন্য গোলাকার কোণ তৈরি করে। বৈশিষ্ট্যের মান হিসাবে যেকোনো আকারের একক ব্যবহার করা যায়। ডিফল্ট মান: 0। এটি নিম্নলিখিত বৈশিষ্ট্যগুলির জন্য একটি সংক্ষিপ্ত রূপ: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

সিনট্যাক্স

সিলেক্টর {
	border-radius: মান;
}

মানের সংখ্যা

বৈশিষ্ট্যটি 1, 2, 3 বা 4টি মান নিতে পারে, স্পেস দ্বারা বিচ্ছিন্ন:

সংখ্যা	বর্ণনা
`1`	সব কোণের জন্য একসাথে।
`2`	প্রথম মানটি উপরের ডান এবং নীচের বাম কোণের জন্য গোলাকারকরণ নির্ধারণ করে, দ্বিতীয়টি - উপরের বাম এবং নীচের ডান কোণের জন্য।
`3`	প্রথম মানটি উপরের বাম কোণের জন্য গোলাকারকরণ নির্ধারণ করে, দ্বিতীয়টি - একসাথে উপরের ডান এবং নীচের বাম কোণের জন্য, এবং তৃতীয়টি - নীচের ডান কোণের জন্য।
`4`	প্রথম মানটি উপরের বাম কোণের জন্য গোলাকারকরণ নির্ধারণ করে, দ্বিতীয়টি - উপরের ডান কোণের জন্য, তৃতীয়টি - নীচের ডান কোণের জন্য, এবং চতুর্থটি - নীচের বাম কোণের জন্য।

উপবৃত্তাকার গোলাকারকরণ

স্ল্যাশ দ্বারা বিভক্ত দুটি মান উপবৃত্তাকার গোলাকারকরণ সেট করে। স্ল্যাশের আগের মানটি অনুভূমিক গোলাকারকরণ নির্দেশ করে, এবং স্ল্যাশের পরে মানগুলি - উল্লম্ব গোলাকারকরণ:

সিলেক্টর {
	border-radius: অনুভূমিক / উল্লম্ব;
}

যদি একাধিক কোণের জন্য গোলাকারকরণ নির্ধারণ করা হয়, তবে স্ল্যাশের আগে সব অনুভূমিক গোলাকারকরণ তালিকাভুক্ত করা হয়, এবং তার পরে - সব উল্লম্ব গোলাকারকরণ।

উদাহরণ

আসুন সব কোণের জন্য 10px গোলাকারকরণ সেট করি:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

উদাহরণ

আসুন দেখি বিন্দু হিসাবে সীমানার গোলাকারকরণ কেমন দেখায়:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

উদাহরণ

একটি তির্যকের কোণের জন্য 10px গোলাকারকরণ সেট করি, এবং দ্বিতীয় তির্যকের কোণের জন্য 40px গোলাকারকরণ সেট করি:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

উদাহরণ

উপরের বাম কোণের জন্য 10px গোলাকারকরণ সেট করি, নীচের ডান কোণের জন্য 30px গোলাকারকরণ সেট করি, এবং দ্বিতীয় তির্যকের কোণের জন্য 50px গোলাকারকরণ সেট করি:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

উদাহরণ

প্রতিটি কোণের জন্য আলাদা আলাদা গোলাকারকরণ সেট করি:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

উদাহরণ

আসুন উপবৃত্তাকার গোলাকারকরণ তৈরি করি, গোলাকারকরণের অনুভূমিক অংশের জন্য 20px সেট করে, এবং উল্লম্ব অংশের জন্য 40px সেট করি:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

উদাহরণ

এবং এখন আলাদাভাবে প্রতিটি কোণের জন্য বিভিন্ন উপবৃত্তাকার গোলাকারকরণ সেট করি:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

উদাহরণ

যদি একটি বর্গক্ষেত্র ব্লকের জন্য গোলাকারকরণ, বর্গক্ষেত্রের বাহুর অর্ধেক সমান সেট করা হয়, তাহলে একটি বৃত্ত পাওয়া যাবে:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

উদাহরণ

যদি গোলাকারকরণ, বর্গক্ষেত্রের বাহুর চেয়ে বেশি সেট করা হয়, তবুও একটি বৃত্ত পাওয়া যাবে:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

উদাহরণ

একটি বৃত্তও পাওয়া যাবে, যদি border-radius কে 50% এ সেট করা হয় (সুবিধা হল যে বর্গক্ষেত্রের আকার পরিবর্তন হলে গোলাকারকরণ পরিবর্তন করতে হবে না):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

উদাহরণ

যদি একটি আয়তক্ষেত্রের জন্য border-radius শতাংশে সেট করা হয়, তাহলে একটি উপবৃত্তাকার গোলাকারকরণ পাওয়া যাবে। যদি প্রস্থ 400px এ সেট করা হয়, উচ্চতা 200px এ সেট করা হয়, এবং border-radius 10% এ সেট করা হয়, তবে এটি 40px/20px লেখার সমান:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

উদাহরণ

একটি আয়তক্ষেত্রের জন্য border-radius এর মান 50% এ সেট করি - একটি উপবৃত্ত পাওয়া যাবে:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

উদাহরণ

বৈশিষ্ট্য border-radius শুধুমাত্র সীমানার কোণগুলিকেই গোল করে না, বরং পটভূমিকেও গোল করে:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

আরও দেখুন

বৈশিষ্ট্য border,
যা সীমানার জন্য একটি সংক্ষিপ্ত রূপ বৈশিষ্ট্য