CSS বর্ডার

CSS-এর border প্রপার্টি আপনাকে একটি এলিমেন্টের বর্ডারের স্টাইল, প্রস্থ এবং রঙ নির্ধারণ করতে দেয়।

CSS ব্যাকগ্রাউন্ড প্রপার্টি:

আমার চারদিকেই বর্ডার আছে।

আমার একটি লাল নিচের বর্ডার আছে।

আমার গোলাকার বর্ডার আছে।

আমার একটি নীল বামের বর্ডার আছে।

---

border-style প্রপার্টি নির্ধারণ করে কী ধরনের বর্ডার দেখানো হবে।

নিচের মানগুলো অনুমোদিত:

• dotted - একটি ডটেড বর্ডার নির্ধারণ করে
• dashed - একটি ড্যাশড বর্ডার নির্ধারণ করে
• solid - একটি সলিড বর্ডার নির্ধারণ করে
• double - একটি ডাবল বর্ডার নির্ধারণ করে
• groove - একটি 3D গ্রুভড বর্ডার নির্ধারণ করে। প্রভাবটি border-color মানের উপর নির্ভর করে
• ridge - একটি 3D রিজড বর্ডার নির্ধারণ করে। প্রভাবটি border-color মানের উপর নির্ভর করে
• inset - একটি 3D ইনসেট বর্ডার নির্ধারণ করে। প্রভাবটি border-color মানের উপর নির্ভর করে
• outset - একটি 3D আউটসেট বর্ডার নির্ধারণ করে। প্রভাবটি border-color মানের উপর নির্ভর করে
• none - কোনো বর্ডার নির্ধারণ করে না
• hidden - একটি লুকানো বর্ডার নির্ধারণ করে

border-style প্রপার্টিতে এক থেকে চারটি মান থাকতে পারে (উপরের বর্ডার, ডানের বর্ডার, নিচের বর্ডার এবং বামের বর্ডারের জন্য)।

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:

একটি ডটেড বর্ডার।

একটি ড্যাশড বর্ডার।

একটি সলিড বর্ডার।

একটি ডাবল বর্ডার।

একটি গ্রুভ বর্ডার। প্রভাবটি border-color মানের উপর নির্ভর করে।

একটি রিজ বর্ডার। প্রভাবটি border-color মানের উপর নির্ভর করে।

একটি ইনসেট বর্ডার। প্রভাবটি border-color মানের উপর নির্ভর করে।

একটি আউটসেট বর্ডার। প্রভাবটি border-color মানের উপর নির্ভর করে।

কোনো বর্ডার নেই।

একটি লুকানো বর্ডার।

একটি মিশ্র বর্ডার।

---

border-width প্রপার্টি চারটি বর্ডারের প্রস্থ নির্ধারণ করে।

প্রস্থ একটি নির্দিষ্ট মাপ হিসেবে (px, pt, cm, em ইত্যাদিতে) অথবা পূর্বনির্ধারিত তিনটি মানের একটি ব্যবহার করে সেট করা যায়: thin, medium, বা thick।

border-width প্রপার্টিতে এক থেকে চারটি মান থাকতে পারে (উপরের বর্ডার, ডানের বর্ডার, নিচের বর্ডার এবং বামের বর্ডারের জন্য)।

5px border-width

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: medium;
}
p.three {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}

চারটি বর্ডারের রঙ সেট করতে border-color প্রপার্টি ব্যবহার করা হয়।

রঙ সেট করা যায় এভাবে:

• নাম - একটি রঙের নাম উল্লেখ করুন, যেমন "red"
• Hex - একটি hex মান উল্লেখ করুন, যেমন "#ff0000"
• RGB - একটি RGB মান উল্লেখ করুন, যেমন "rgb(255,0,0)"
• transparent

border-color প্রপার্টিতে এক থেকে চারটি মান থাকতে পারে (উপরের বর্ডার, ডানের বর্ডার, নিচের বর্ডার এবং বামের বর্ডারের জন্য)।

border-color সেট করা না থাকলে, এটি এলিমেন্টের রঙ ইনহেরিট করে।

লাল বর্ডার

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

উপরের উদাহরণ থেকে আপনি দেখেছেন যে প্রতিটি পাশের জন্য আলাদা বর্ডার নির্ধারণ করা সম্ভব।

CSS-এ, প্রতিটি বর্ডার (উপর, ডান, নিচ, এবং বাম) আলাদাভাবে নির্ধারণের জন্যও প্রপার্টি রয়েছে:

ভিন্ন ভিন্ন বর্ডার স্টাইল

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

তো, এটি এভাবে কাজ করে:

border-style প্রপার্টিতে চারটি মান থাকলে:

• border-style: dotted solid double dashed;
  • উপরের বর্ডার dotted
  • ডানের বর্ডার solid
  • নিচের বর্ডার double
  • বামের বর্ডার dashed

border-style প্রপার্টিতে তিনটি মান থাকলে:

• border-style: dotted solid double;
  • উপরের বর্ডার dotted
  • ডান ও বামের বর্ডার solid
  • নিচের বর্ডার double

border-style প্রপার্টিতে দুটি মান থাকলে:

• border-style: dotted solid;
  • উপর ও নিচের বর্ডার dotted
  • ডান ও বামের বর্ডার solid

border-style প্রপার্টিতে একটি মান থাকলে:

• border-style: dotted;
  • চারটি বর্ডারই dotted

উপরের উদাহরণে border-style প্রপার্টি ব্যবহার করা হয়েছে। তবে, এটি border-width এবং border-color-এর সাথেও কাজ করে।

---

উপরের উদাহরণ থেকে আপনি দেখতে পাচ্ছেন, বর্ডার নিয়ে কাজ করার সময় বিবেচনা করার মতো অনেক প্রপার্টি আছে।

কোড ছোট করতে, একটি প্রপার্টিতে সব পৃথক বর্ডার প্রপার্টি নির্ধারণ করাও সম্ভব।

border প্রপার্টি হলো নিচের পৃথক বর্ডার প্রপার্টিগুলোর একটি শর্টহ্যান্ড প্রপার্টি:

• border-width
• border-style (বাধ্যতামূলক)
• border-color

---

একটি এলিমেন্টে গোলাকার বর্ডার যোগ করতে border-radius প্রপার্টি ব্যবহার করা হয়:

সাধারণ বর্ডার

গোলাকার বর্ডার

আরও গোলাকার বর্ডার

সবচেয়ে গোলাকার বর্ডার

---