সি এস এস বর্ডার (CSS Border)

বর্ডার স্টাইল

Border-style property নির্ধারণ করা হয় কি ধরনের border প্রদর্শিত হবে।
বি: দ্র: Border properties এর কোন প্রভাব কাজ করবে না যদি না border-style property নির্ধারণ করা হয়।

বর্ডার স্টাইল মান

বর্ডার এর প্রসস্থতা

”Border-Width” property ব্যাবহার করা হয় border এর width নির্ধারণ করার জন্য ।

Width ব্যাবহার করা হয় pixels এককে অথবা তিনটি পূর্ব নিরধারিত values: thin, medium, or thick দ্বারা।

বি: দ্র: "border-width" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

বর্ডার এর রঙ

Border-color property ব্যাবহার করা হয় border এর color নির্ধারণ করার জন্য। Color নির্ধারণ করার উপায়ঃ

আপনি চাইলে border color কে "transparent" হিসেবে নির্ধারণ করতে পারেন।

যদি না border color নির্ধারণ করা হয় inherited from "the color property of the element"।

বি: দ্র: "border-color" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

বর্ডার - স্বতন্ত্র সাইড

CSS এর ক্ষেত্রে ভিন্ন ভিন্ন border ভিন্ন ভিন্ন পাশে ব্যাবহার করা সম্ভবঃ
উদাহরনঃ

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

উপরে দেয়া উদাহরণ টি একটি একক property দিয়েও নির্ধারণ করা যায়ঃ

উদাহরনঃ

p {
    border-style: dotted solid;
}

border-style property এর একটি থেকে চারটি values হতে পারেঃ

• border-style: dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed
• border-style: dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double
• border-style: dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid
• border-style: dotted;
  • all four borders are dotted

Border-style property উপরোক্ত উদাহরণে ব্যবহার করা হয়। যাইহোক, এটি border-width and border-color এর সাথে কাজ করতে সক্ষম।

Border - সংক্ষিপ্ত property

এতক্ষন আপনি উপরের উদাহরন দেখেছেন যেখানে যখন borders নির্ধারণ করতে হয় তখন অনেকগুলি properties consider করতে হয় ।

Individual border properties কে একটি property তে রুপান্তর করে code কে ছোট করা সম্ভব। একেই shorthand property বলে।

Borde property টি একটি individual border properties এর জন্য shorthand এ লিখা হয়ে থাকেঃ

• border-width
• border-style (required)
• border-color

উদাহরনঃ

p {
     border: 5px solid red;
 }

CSS এর সকল Border Properties