CSS বর্ডার (Border): ধাপে ধাপে টিউটোরিয়াল এবং উদাহরণ

CSS বর্ডার প্রোপার্টি একটি HTML এলিমেন্টের বর্ডার সেট করতে ব্যবহৃত হয়। এর শর্টহ্যান্ড প্রোপার্টিগুলি হলো border-width, border-color, এবং border-style।

ওয়েব পেজে এলিমেন্টের চারপাশে বর্ডার যোগ করা ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। বর্ডার ব্যবহার করা যেতে পারে একটি ওয়েব পেজের কন্টেন্ট পৃথক করার জন্য, যা মানুষের জন্য পৃষ্ঠায় উপস্থাপিত তথ্য ব্যাখ্যা করা সহজ করে তোলে।

CSS বর্ডার প্রোপার্টি একটি HTML এলিমেন্টের বর্ডার সেট করতে ব্যবহৃত হয়। বর্ডার প্রোপার্টি তিনটি সাব-প্রোপার্টির শর্টহ্যান্ড যা একটি বর্ডারের স্টাইল, রঙ, এবং প্রস্থ সংজ্ঞায়িত করে।

এই টিউটোরিয়ালে, আমরা আলোচনা করব CSS বর্ডার প্রোপার্টি কীভাবে ব্যবহার করতে হয়, এবং এর সাব-প্রোপার্টিগুলি কীভাবে ব্যবহার করে একটি HTML এলিমেন্টের জন্য বর্ডার ডিজাইন করতে হয়। এই টিউটোরিয়ালের শেষে, আপনি CSS-এ বর্ডার ডিজাইন করার জন্য প্রয়োজনীয় সকল জ্ঞান দিয়ে সজ্জিত হবেন।

CSS-এ বর্ডার পরিচিতি (An Intro to Borders in CSS)

যে正如 আমরা আগে বলেছি, CSS বর্ডার প্রোপার্টি একটি ওয়েব এলিমেন্টের চারপাশে একটি বর্ডার নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি বর্ডার একটি ইমেজ, একটি বক্স, বা একটি ওয়েব ফর্মের চারপাশে প্রযোজ্য করা যেতে পারে।

বর্ডার প্রোপার্টি তিনটি সাব-প্রোপার্টির শর্টহ্যান্ড যা একটি এলিমেন্টের বর্ডারে নির্দিষ্ট স্টাইল প্রযোজ্য করতে ব্যবহৃত হয়। শর্টহ্যান্ড প্রোপার্টিগুলি হলো:

• border-width (একটি বর্ডারের মোটা কত হবে তা নির্দিষ্ট করে)
• border-color (একটি বর্ডারের রঙ নির্দিষ্ট করে)
• border-style (একটি বর্ডারের স্টাইল নির্দিষ্ট করে)

যখন আপনি একটি বর্ডার সংজ্ঞায়িত করছেন, তবে আপনি হয় border প্রোপার্টি ব্যবহার করে বর্ডার নির্দিষ্ট করতে পারেন বা এর প্রতিটি সাব-প্রোপার্টি ব্যবহার করতে পারেন। আমরা এই আর্টিকেলে উভয় পদ্ধতিই আলোচনা করব।

CSS বর্ডার সাব-প্রোপার্টি (CSS Border Sub-properties)

যে正如 আমরা আগে আলোচনা করেছি, CSS-এ একটি বর্ডার সংজ্ঞায়িত করতে তিনটি সাব-প্রোপার্টি ব্যবহৃত হয়। চলুন এই সাব-প্রোপার্টিগুলি প্রতিটিকে ভাঙে এবং কীভাবে সেগুলি কাজ করে তা একটি উদাহরণের মাধ্যমে অন্বেষণ করি।

border-style প্রোপার্টি CSS-এ

বর্ডার স্টাইল প্রোপার্টি ব্যবহার করা হয় একটি ওয়েব পেজে কী ধরনের বর্ডার প্রদর্শিত হবে তা সংজ্ঞায়িত করতে। অন্য কথায়, border-style নির্ধারণ করে একটি ওয়েব পেজে বর্ডার লাইনগুলো কীভাবে দেখাবে: স olid (solid), ডটেড (dotted), ড্যাশড (dashed), ইত্যাদি।

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 স olid বর্ডার তৈরি করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<style>
  .box { border-style: solid; border-width: 5px; }
</style>
<html>
  <p class="box">5px thick solid border</p>
</html>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের কোডের আউটপুট দেখতে।

আমরা একটি বর্ডার তৈরি করেছি যা স olid স্টাইল ব্যবহার করে এবং যার মোটা 5px।

border-color প্রোপার্টি CSS-এ

যে όπως আপনি আশা করবেন, রঙের জন্য একটি প্রোপার্টি রঙ নির্দিষ্ট করে। border-color প্রোপার্টি CSS-এ একটি বর্ডারের রঙ সেট করতে ব্যবহৃত হয়। border-color প্রোপার্টি যে রঙ মানগুলো গ্রহণ করে সেগুলি হলো:

• name (একটি রঙের নাম, যেমন 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>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের কোডের আউটপুট দেখতে।

সাব-প্রোপার্টি মাল্টিপল ভ্যালু (Sub-property Multiple Values)

CSS border প্রোপার্টির প্রতিটি সাব-প্রোপার্টি একাধিক মান গ্রহণ করতে পারে। এটি আপনাকে CSS-এ একটি এলিমেন্টের প্রতিটি প্রান্তের জন্য কাস্টম বর্ডার সেট করতে দেয়।

যদি আপনি CSS-এ একটি এলিমেন্টের প্রতিটি প্রান্তের জন্য কাস্টম বর্ডার সেট করতে চান, তবে নিচের নিয়মগুলো মনে রাখবেন:

• আপনি যদি একটি মান নির্দিষ্ট করেন, তবে বর্ডার স্টাইলটি সকল প্রান্তে প্রযোজ্য হবে।
• আপনি যদি দুটি মান নির্দিষ্ট করেন, তবে নিচের ক্রমটি ব্যবহার হবে:
  • উপর এবং নিচ, বাম এবং ডান
• আপনি যদি তিনটি মান নির্দিষ্ট করেন, তবে নিচের ক্রমটি ব্যবহার হবে:
  • উপর, ডান এবং বাম, নিচ
• আপনি যদি চারটি মান নির্দিষ্ট করেন, তবে নিচের ক্রমটি ব্যবহার হবে:
  • উপর, ডান, নিচ, বাম

মান লইজिए আমরা একটি বর্ডার তৈরি করতে চাই যার উপর এবং নিচে স olid এবং বাম এবং ডানে ডটেড থাকবে। আমরা এই কাজ সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:

<style>
  .box { border-style: solid dashed; }
</style>
<html>
  <p class="box">solid top and dashed sides border</p>
</html>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের কোডের আউটপুট দেখতে।

আমাদের কোডে, আমরা দুটি বর্ডার স্টাইল নির্দিষ্ট করে একটি কম্বিনেশন বর্ডার তৈরি করেছি। এই এলিমেন্টটি তার বাম এবং ডান প্রান্তে ড্যাশড বর্ডার স্টাইল ব্যবহার করে, এবং উপরের এবং নিচের প্রান্তে স olid স্টাইল ব্যবহার করে।

আমরা একই পদ্ধতি ব্যবহার করব যদি আমরা বর্ডার রঙ বা প্রস্থ পরিবর্তন করতে চাই।

CSS বর্ডার শর্টহ্যান্ড (CSS Border Shorthand)

CSS-এ একটি বর্ডার সংজ্ঞায়িত করতে তিনটি সাব-প্রোপার্টি রয়েছে।

উপরের উদাহরণগুলোতে, আমরা আলোচনা করেছি এই সাব-প্রোপার্টিগুলি প্রতিটিকে স্বতন্ত্রভাবে কীভাবে ব্যবহার করতে হয়। যাইহোক, সকল বর্ডার সাব-প্রোপার্টি একটি একক প্রোপার্টিতে নির্দিষ্ট করা সম্ভব। এটি আমাদের কোড সংক্ষিপ্ত করতে দেবে।

বর্ডার প্রোপার্টি একটি CSS বর্ডার সংজ্ঞায়িত করতে নিচের কাঠামো ব্যবহার করে:

• border-width (ঐচ্ছিক)
• border-style (আবশ্যক)
• border-color (ঐচ্ছিক)

মান লইজिए আমরা একটি টেক্সট লাইনের চারপাশে 5px স olid গোলাপি (pink) বর্ডার তৈরি করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<style>
  .box { border: 5px solid pink; }
</style>
<html>
  <p class="box">5px solid pink border</p>
</html>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের কোডে, আপনি দেখতে পারেন যে আমরা আমাদের বর্ডার এক লাইনে সংজ্ঞায়িত করতে পেরেছি, তিন লাইন এবং প্রতিটি সাব-প্রোপার্টি ব্যবহার করার পরিবর্তে।

CSS ইন্ডিভিজুয়াল বর্ডারস (CSS Individual Borders)

বর্ডার সাব-প্রোপার্টি এবং প্রোপার্টি একটি ওয়েব এলিমেন্টের ইনডিভিজুয়াল পাশেও প্রযোজ্য করা যেতে পারে। আপনি যদি একটি ওয়েব এলিমেন্টের একটি নির্দিষ্ট বর্ডারের চেহারা সেট করতে চান, তবে আপনি এই প্রোপার্টিগুলি ব্যবহার করতে পারেন:

• border-left-[property]
• border-right-[property]
• border-top-[property]
• border-bottom-[property]

প্রোপার্টির মান হতে পারে: 

• style (বর্ডারের স্টাইল সেট করতে)
• color (বর্ডারের রঙ সেট করতে)
• width (বর্ডারের মোটা সেট করতে)
• খালি (বর্ডার শর্টহ্যান্ড ব্যবহার করে বর্ডার সংজ্ঞায়িত করতে)

প্রোপার্টি এবং মানগুলো ব্যবহার করা এবং মনে রাখা সহজ, কিন্তু এখানে সকল সম্ভাব্য সাব-প্রোপার্টি-ভ্যালু কম্বিনেশনের একটি তালিকা দেওয়া হলো:

• border left style
• border left color
• border left width

• border right style
• border right color
• border right width

• border top style
• border top color
• border top width

• border bottom style
• border bottom color
• border bottom width

মান লইজिए আমরা একটি টেক্সট বক্স তৈরি করতে চাই যার বামে একটি স olid বর্ডার থাকবে যা 2px প্রস্থের, এবং উপরে একটি ডটেড বর্ডার থাকবে যা 5px প্রস্থের। আমরা এই কাজ সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:

<style>
  .box { border-left: 2px solid; border-top: 5px dotted; }
</style>
<html>
  <p class="box">mixed border</p>
</html>

আমাদের বক্সের বামে একটি 2px স olid বর্ডার রয়েছে, در الضفة উপরে একটি 5px ডটেড বর্ডার রয়েছে। ইনডিভিজুয়াল বর্ডার প্রোপার্টি ব্যবহার করে, আমরা নির্দিষ্ট করতে পেরেছি বর্ডারটি বক্সের প্রতিটি প্রান্তে কীভাবে দেখাবে।

উপসংহার (Conclusion)

border প্রোপার্টি CSS-এ একটি বর্ডার তৈরি করতে ব্যবহৃত হয়, এবং এর তিনটি সাব-প্রোপার্টি রয়েছে—স্টাইল, রঙ, এবং প্রস্থ—যেগুলি একটি বর্ডারের প্রতিটি অংশ আলাদা আলাদা কাস্টমাইজ করতে ব্যবহৃত হয়।

এই টিউটোরিয়ালে, কয়েকটি উদাহরণসহ, বর্ডার প্রোপার্টি এবং এর তিনটি সাব-প্রোপার্টি কীভাবে ব্যবহার করে CSS-এ একটি বর্ডার তৈরি করতে হয় তা আলোচনা করা হয়েছে। আমরা একটি এলিমেন্টের প্রতিটি পাশ স্টাইল করার জন্য ইন্ডিভিজুয়াল বর্ডার প্রোপার্টি কীভাবে ব্যবহার করতে হয় তা অন্বেষণ করেছি।

আপনি যদি CSS বর্ডার সম্পর্কে আরও জানতে চান, তবে আমাদের অন্যান্য টিউটোরিয়াল দেখুন যেগুলি ব্যাখ্যা করে কীভাবে বর্ডার ইমেজ, বর্ডার কল্যাপ্স (border collapse), আউटलাইন এবং আউटलাইন অফসেট, রাউন্ডেড কর্নার জন্য বর্ডার রেডিয়াস, এবং সৌন্দর্য parroquia বক্স শ্যাডো ইফেক্ট ইমপ্লিমেন্ট করতে হয়!