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

CSS border properties এলিমেন্ট এর border এর style, size, and color নির্ধারণ করতে সাহায্য করে ।

 

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

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

 

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

none কোন border না থাকা নির্দেশ করে
dotted dotted border নির্দেশ করা হয় এটি দ্বারা
dashed dashed border নির্দেশ করা হয় এটি দ্বারা
solid solid border নির্দেশ করা হয় এটি দ্বারা
double দুইটি border একত্রে নির্দেশ করা হয় এটি দ্বারা। দুটি border এর ব্যাপকতা একই থাকে যেমনটি border-width value তে দেয়া হয়।
groove 3D grooved border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
ridge 3D ridged borderনির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
inset 3D inset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
outset 3D outset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।

 

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

”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 নির্ধারণ করার উপায়ঃ

name color value নির্ধারণ , like “red”
RGB RGB value নির্ধারণ , like “rgb(255,0,0)”
Hex shex valueনির্ধারণ, like “#ff0000”

আপনি চাইলে 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

প্রোপার্টি

বর্ণনা

border সকল border properties একটি declaration দ্বারা নির্ধারণ
border-bottom সকল bottom border properties একটি declaration দ্বারা নির্ধারণ
border-bottom-color bottom border এর color নির্ধারণ
border-bottom-style bottom border এর style নির্ধারণ
border-bottom-width bottom border এর width নির্ধারণ
border-color চারটি borders এর color নির্ধারণ
border-left একটি declaration দ্বারা সকল left border এর properties নির্ধারণ
border-left-color Left border এর color নির্ধারণ
border-left-style Left border এর style নির্ধারণ
border-left-width Left border এর width নির্ধারণ
border-right একটি declaration দ্বারা সকল right border এর properties নির্ধারণ
border-right-color right border এর color নির্ধারণ
border-right-style right border এর style নির্ধারণ
border-right-width right border এর width নির্ধারণ
border-style চারটি borders এর style নির্ধারণ
border-top একটি declaration দ্বারা সকল top এর properties নির্ধারণ
border-top-color top border এর color নির্ধারণ
border-top-style top border এর style নির্ধারণ
border-top-width top border এর width নির্ধারণ
border-width চারটি borders এর style নির্ধারণ