CSS বর্ডার প্রস্থ (CSS Border Width) [বাংলায় CSS মাস্টার ক্লাস]: ওয়েব ডিজাইনের ক্ষেত্রে, বিশদ বিষয়, এবং CSS বর্ডার বৈশিষ্ট্যগুলি HTML উপাদানগুলির উপস্থিতি সূক্ষ্ম-টিউন করার জন্য বিস্তৃত সরঞ্জাম সরবরাহ করে। সীমানাগুলির একটি মৌলিক দিক হল সীমানা-প্রস্থ সম্পত্তি ব্যবহার করে তাদের প্রস্থ নিয়ন্ত্রণ করা। এই আপাতদৃষ্টিতে সহজ বৈশিষ্ট্যটি একটি ওয়েবপেজে উপাদানগুলির ভিজ্যুয়াল শৈলী এবং কাঠামো সংজ্ঞায়িত করার ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।
সীমানা বেধ সংজ্ঞায়িত করা (Border Thickness): সীমানা-প্রস্থ বৈশিষ্ট্য ডেভেলপারদের একটি উপাদানের সীমানার বেধ (border-width) নির্দিষ্ট করার অনুমতি দেয়। আপনি বিভিন্ন ইউনিট ব্যবহার করে প্রস্থ সেট করতে পারেন, যেমন পিক্সেল (“px”), ইএমএস (“em”), বা শতাংশ (%), যা আপনাকে সীমানার আকারের উপর সুনির্দিষ্ট নিয়ন্ত্রণ দেয়।
স্বতন্ত্র দিক ( Individual Sides): CSS আপনাকে বর্ডার-টপ-প্রস্থ, সীমানা-ডান-প্রস্থ, সীমানা-নীচ-প্রস্থ এবং সীমানা-বাম-প্রস্থের মতো বৈশিষ্ট্যগুলি ব্যবহার করে একটি উপাদানের পৃথক পক্ষের জন্য সীমানা প্রস্থ নির্ধারণ করতে সক্ষম করে। গ্রানুলারিটির এই স্তরটি আপনাকে অনন্য সীমানা প্রভাব তৈরি করতে দেয়, যেমন উপরে এবং নীচে ঘন সীমানা বা অপ্রতিসম নকশা।
- border-width: thin;
- border-width: medium;
- border-width: thick;
- border-top-width: 2px;
- border-right-width: 2px;
- border-bottom-width: 2px;
- border-left-width: 2px;
CSS বর্ডার প্রস্থ (CSS Border Width) [বাংলায় CSS মাস্টার ক্লাস] সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<button class="button1">Button</button>
<button class="button2">Button</button>
<button class="button3">Button</button>
<button class="button4">Button</button>
<button class="button5">Button</button>
<button class="button6">Button</button>
<button class="button7">Button</button>
<button class="button8">Button</button>
<button class="button9">Button</button>
<button class="button10">Button</button>
<button class="button11">Button</button>
<style>
/* Example: 1 */
.button1 {
border-width: thin;
}
/* Example: 2 */
.button2 {
border-width: medium;
}
/* Example: 3 */
.button3 {
border-width: thick;
}
/* Example: 4 */
.button4 {
border-width: 1em;
}
/* Example: 5 */
.button5 {
border-width: 10px;
}
/* Example: 6 */
.button6 {
border-width: 0 4px 8px 12px;
}
/* Example: 7 */
.button7 {
border-bottom-width: 5px;
}
/* Example: 8 */
.button8 {
border-left-width: 5px;
}
/* Example: 9 */
.button9 {
border-right-width: 5px;
}
/* Example: 10 */
.button10 {
border-top-width: 5px;
}
/* Example: 11 */
.button11 {
/* Choose any: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
border-style: dashed;
/* choose any: thin, medium, thick or you can add custom value */
border-width: thick ;
}
</style>
</body>
</html>