CSS বর্ডার প্রপার্টি একটি এর বর্ডার সেট করতে ব্যবহৃত হয় HTML উপাদান। এটির শর্টহ্যান্ড বৈশিষ্ট্যগুলি হল border-width , border-color , এবং border-style ।
একটি ওয়েব পৃষ্ঠার উপাদানগুলির চারপাশে সীমানা যুক্ত করা ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। সীমানাগুলি একটি ওয়েব পৃষ্ঠার বিষয়বস্তু আলাদা করতে ব্যবহার করা যেতে পারে, যাতে লোকেরা পৃষ্ঠায় উপস্থাপিত তথ্য ব্যাখ্যা করা সহজ করে তোলে৷
CSS বর্ডার প্রপার্টি HTML এলিমেন্টের বর্ডার সেট করতে ব্যবহৃত হয়। বর্ডার প্রপার্টি তিনটি সাব-প্রপার্টির সংক্ষিপ্ত হস্ত যা একটি বর্ডারের শৈলী, রঙ এবং প্রস্থকে সংজ্ঞায়িত করে।
এই টিউটোরিয়ালে, আমরা আলোচনা করব কিভাবে CSS বর্ডার প্রপার্টি ব্যবহার করতে হয় এবং কিভাবে এর সাব-প্রপার্টি ব্যবহার করতে হয়, একটি HTML এলিমেন্টের জন্য বর্ডার ডিজাইন করতে। এই টিউটোরিয়ালের শেষে, আপনি CSS-এ বর্ডার ডিজাইন করার জন্য প্রয়োজনীয় সমস্ত জ্ঞান দিয়ে সজ্জিত হবেন।
সিএসএস-এ বর্ডারগুলির একটি ভূমিকা
আমরা আগেই বলেছি, CSS বর্ডার প্রপার্টি একটি ওয়েব এলিমেন্টের চারপাশে একটি বর্ডার নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি চিত্র, একটি বাক্স, বা একটি ওয়েব ফর্মের চারপাশে একটি সীমানা প্রয়োগ করা যেতে পারে৷
৷সীমানা সম্পত্তি তিনটি উপ-সম্পত্তির সংক্ষিপ্ত বিবরণ যা একটি উপাদানের সীমানায় নির্দিষ্ট শৈলী প্রয়োগ করতে ব্যবহৃত হয়। শর্টহ্যান্ড বৈশিষ্ট্যগুলি হল:
border-width(একটি সীমানার পুরুত্ব নির্দিষ্ট করে)border-color(একটি সীমানার রঙ নির্দিষ্ট করে)border-style(একটি সীমানার শৈলী নির্দিষ্ট করে)
যখন আপনি একটি সীমানা নির্ধারণ করছেন, আপনি হয় border ব্যবহার করতে পারেন সীমানা নির্দিষ্ট করতে বা এর প্রতিটি উপ-সম্পত্তি ব্যবহার করতে সম্পত্তি। আমরা এই নিবন্ধ জুড়ে উভয় পন্থা নিয়ে আলোচনা করব।
CSS বর্ডার সাব-প্রপার্টি
যেমনটি আমরা আগে আলোচনা করেছি, CSS-এ একটি বর্ডার সংজ্ঞায়িত করতে ব্যবহৃত তিনটি সাব-প্রপার্টি রয়েছে। আসুন এই সাব-প্রোপার্টিগুলির প্রতিটি ভেঙে ফেলি এবং তারা কীভাবে কাজ করে তার একটি উদাহরণ অন্বেষণ করি৷
৷81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
border-style CSS
-এ সম্পত্তি
বর্ডার স্টাইল প্রপার্টি একটি ওয়েব পেজে কোন ধরনের বর্ডার প্রদর্শন করতে হবে তা নির্ধারণ করতে ব্যবহৃত হয়। অন্য কথায়, border-style একটি ওয়েব পৃষ্ঠায় সীমানা রেখাগুলি কেমন দেখায় তা নির্ধারণ করে:সলিড, ডটেড, ড্যাশড, ইত্যাদি৷
10টি সম্ভাব্য মান রয়েছে যা border-style-এ বরাদ্দ করা যেতে পারে সম্পত্তি প্রতিটি শৈলীর বিবরণ সহ একটি বক্সে প্রয়োগ করার সময় এই শৈলীগুলির প্রতিটি কীভাবে প্রদর্শিত হয় তা এখানে রয়েছে:
এই ওয়েব উপাদানগুলি তৈরি করতে আমরা যে CSS কোডটি ব্যবহার করেছি তা নিম্নরূপ:
.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; } আপনি দেখতে পাচ্ছেন, আমাদের কোডে আমরা আমাদের সীমানা স্টাইল করার জন্য প্রতিটি সম্ভাব্য মান ব্যবহার করেছি।
border-width CSS এ সম্পত্তি
border-width সম্পত্তি একটি CSS সীমানার প্রস্থ সেট করে। একটি সীমানার প্রস্থ একটি CSS দৈর্ঘ্যের মান (pt) ব্যবহার করে সেট করা যেতে পারে , px , em , ইত্যাদি) অথবা তিনটি কাস্টম border-width ব্যবহার করে মান:thin , medium , এবং thick .
ধরুন আমরা একটি 5px তৈরি করতে চাই একটি বাক্সের চারপাশে শক্ত সীমানা। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
<style>
.box {
border-style: solid;
border-width: 5px;
}
</style>
<html>
<p class="box">5px thick solid border</p>
</html>
আমাদের কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমরা একটি বর্ডার তৈরি করেছি যা কঠিন শৈলী ব্যবহার করে এবং যার পুরুত্ব 5px।
border-color CSS
-এ সম্পত্তি
আপনি যেমন আশা করেন, রঙের জন্য একটি সম্পত্তি রঙ নির্দিষ্ট করে। border-color CSS-এ বর্ডারের রঙ সেট করতে প্রপার্টি ব্যবহার করা হয়। border-color দ্বারা গৃহীত রঙের মান সম্পত্তি হল:
- নাম (একটি রঙের নাম, যেমন
blue) - HEX (একটি হেক্সাডেসিমেল রঙের মান, যেমন
#000) - HSL (একটি HSL রঙের মান, যেমন
hsl(10, 100%, 25%)) - RGB (একটি RGB রঙের মান, যেমন
rgb(102, 222, 95)) transparent
ধরুন আপনি 5px চওড়া একটি বিন্দুযুক্ত নীল বর্ডার সহ একটি বাক্স তৈরি করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:
<style>
.box {
border-style: dotted;
border-width: 5px;
border-color: blue;
}
</style>
<html>
<p class="box">5px thick blue dotted border</p>
</html>
আমাদের কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
উপ-সম্পত্তি একাধিক মান
CSS border-এর জন্য প্রতিটি সাব-প্রপার্টি সম্পত্তি একাধিক মান গ্রহণ করতে পারে। এটি আপনাকে CSS-এ একটি উপাদানের প্রতিটি প্রান্তের জন্য কাস্টম সীমানা সেট করতে দেয়।
আপনি যদি CSS-এ একটি এলিমেন্টের প্রতিটি প্রান্তের জন্য কাস্টম সীমানা সেট করতে চান তবে এখানে মনে রাখার নিয়ম রয়েছে:
- যদি আপনি একটি মান নির্দিষ্ট করেন, সীমানা শৈলী সমস্ত প্রান্তে প্রয়োগ করা হবে৷
- যদি আপনি দুটি মান নির্দিষ্ট করেন, তাহলে নিম্নলিখিত ক্রমটি ব্যবহার করা হবে:
- উপর এবং নীচে, বাম এবং ডান
- যদি আপনি তিনটি মান নির্দিষ্ট করেন, তাহলে নিম্নলিখিত ক্রমটি ব্যবহার করা হবে:
- উপর, ডান এবং বাম, নীচে
- যদি আপনি চারটি মান নির্দিষ্ট করেন, তাহলে নিম্নলিখিত ক্রমটি ব্যবহার করা হবে:
- উপর, ডান, নীচে, বাম
ধরুন আমরা একটি শক্ত উপরে এবং নীচে এবং একটি বিন্দুযুক্ত বাম এবং ডান দিয়ে একটি সীমানা তৈরি করতে চেয়েছিলাম। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<style>
.box { border-style: solid dashed; }
</style>
<html>
<p class="box">solid top and dashed sides border</p>
</html>
আমাদের কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের কোডে, আমরা দুটি বর্ডার শৈলী নির্দিষ্ট করে একটি সংমিশ্রণ সীমানা তৈরি করেছি। এই উপাদানটি তার বাম এবং ডান প্রান্তে ড্যাশযুক্ত সীমানা শৈলী এবং উপাদানটির উপরে এবং নীচে কঠিন শৈলী ব্যবহার করে।
আমরা যদি সীমানার রঙ বা প্রস্থ পরিবর্তন করতে চাই তবে আমরা একই পদ্ধতি ব্যবহার করব।
CSS বর্ডার শর্টহ্যান্ড
তিনটি CSS সাব-প্রপার্টি আছে যেগুলো একটি সীমানা নির্ধারণ করতে ব্যবহার করা যেতে পারে।
উপরের উদাহরণগুলিতে, আমরা আলোচনা করেছি কিভাবে এই সাব-প্রোপার্টিগুলির প্রতিটি আলাদাভাবে ব্যবহার করা যায়। যাইহোক, একটি একক সম্পত্তিতে সমস্ত সীমানা উপ-সম্পত্তি নির্দিষ্ট করা সম্ভব। এটি আমাদের কোড ছোট করার অনুমতি দেবে৷
৷সীমানা বৈশিষ্ট্য একটি CSS সীমানা নির্ধারণ করতে নিম্নলিখিত কাঠামো ব্যবহার করে:
border-width(ঐচ্ছিক)border-style(প্রয়োজনীয়)border-color(ঐচ্ছিক)
ধরুন আমরা পাঠ্যের একটি লাইনের চারপাশে একটি 5px কঠিন গোলাপী বর্ডার তৈরি করতে চেয়েছিলাম। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
<style>
.box { border: 5px solid pink };
</style>
<html>
<p class="box">5px solid pink border</p>
</html>
ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের কোডে, আপনি দেখতে পাচ্ছেন যে আমরা তিনটি লাইন এবং প্রতিটি পৃথক সীমানা উপ-সম্পত্তি ব্যবহার করার পরিবর্তে আমাদের সীমানা এক লাইনে সংজ্ঞায়িত করতে সক্ষম হয়েছি।
সিএসএস স্বতন্ত্র সীমানা
সীমানা উপ-বৈশিষ্ট্য এবং সম্পত্তি একটি ওয়েব উপাদানের একটি পৃথক দিকে প্রয়োগ করা যেতে পারে। আপনি যদি একটি ওয়েব উপাদানে একটি নির্দিষ্ট সীমানার উপস্থিতি সেট করতে চান তবে আপনি এই বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন:
border-left-[property]border-right-[property]border-top-[property]border-bottom-[property]
সম্পত্তির মান হতে পারে:
style(সীমানার শৈলী সেট করতে)color(সীমানার রঙ সেট করতে)width(সীমানার পুরুত্ব সেট করতে)- ফাঁকা (সীমানা সংজ্ঞায়িত করার জন্য সীমানা সংক্ষেপ ব্যবহার করতে)
বৈশিষ্ট্য এবং মানগুলি ব্যবহার করা এবং মনে রাখা সহজ, তবে এখানে সমস্ত সম্ভাব্য উপ-সম্পত্তি-মান সমন্বয়গুলির একটি তালিকা রয়েছে:
- সীমান্ত বাম শৈলী
- সীমানার বাম রঙ
- সীমানা বাম প্রস্থ
- সীমান্ত ডান শৈলী
- সীমানার ডান রঙ
- সীমানা ডান প্রস্থ
- বর্ডার টপ স্টাইল
- বর্ডার টপ কালার
- সীমানা শীর্ষ প্রস্থ
- সীমান্ত নীচের শৈলী
- সীমান্ত নীচের রঙ
- সীমানা নীচের প্রস্থ
ধরুন আমরা টেক্সটের একটি বক্স তৈরি করতে চাই যার বাম দিকে একটি কঠিন সীমানা 2px চওড়া এবং উপরে একটি ডটেড বর্ডার যা 5px চওড়া। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<style>
.box {
border-left: 2px solid;
border-top: 5px dotted;
}
</style>
<html>
<p class="box">mixed border</p>
</html> আমাদের বাক্সের বাম দিকে, আমাদের একটি 2px কঠিন সীমানা রয়েছে, যেখানে শীর্ষে একটি 5pc ডটেড বর্ডার রয়েছে৷ পৃথক সীমানা বৈশিষ্ট্যগুলি ব্যবহার করে, আমরা বাক্সের প্রতিটি প্রান্তে সীমানাটি কীভাবে উপস্থিত হওয়া উচিত তা নির্দিষ্ট করতে সক্ষম হয়েছি৷
উপসংহার
border CSS-এ একটি বর্ডার তৈরি করতে প্রপার্টি ব্যবহার করা হয় এবং এতে তিনটি সাব-প্রপার্টি রয়েছে—স্টাইল, কালার এবং প্রস্থ—যা বর্ডারের প্রতিটি অংশকে আলাদাভাবে কাস্টমাইজ করতে ব্যবহার করা হয়।
এই টিউটোরিয়ালে কয়েকটি উদাহরণ সহ আলোচনা করা হয়েছে, কিভাবে CSS-এ বর্ডার তৈরি করতে বর্ডার প্রপার্টি এবং এর তিনটি সাব-প্রপার্টি ব্যবহার করতে হয়। পৃথক বর্ডার বৈশিষ্ট্যগুলি ব্যবহার করে কীভাবে একটি উপাদানের প্রতিটি পাশে স্টাইল করা যায় তাও আমরা অন্বেষণ করেছি৷
আপনি যদি CSS সীমানা সম্পর্কে আরও জানতে চান, আমাদের অন্যান্য টিউটোরিয়ালগুলি দেখুন যেগুলি কীভাবে সীমানা চিত্র, সীমানা পতন, রূপরেখা এবং আউটলাইন অফসেটগুলি, বৃত্তাকার কোণগুলির জন্য একটি সীমানা ব্যাসার্ধ এবং নান্দনিকভাবে-আনন্দজনক বক্স ছায়া প্রভাব প্রয়োগ করতে হয় তা ব্যাখ্যা করে!
