border-color property ব্যবহার করে চার ধারের বর্ডারের কালার নির্দিষ্ট করা যায় ।
CSS Border Color
কালার গুলোকে কয়েক ভাবে সেট করা যায়, যেমন
- name – specify a color name, like “red”
- HEX – specify a HEX value, like “#ff0000”
- RGB – specify a RGB value, like “rgb(255,0,0)”
- HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
- transparent
যদি border-color সেট করা না থাকে, তাহলে এটি এলিমেন্টের কালার নিয়ে নেয় ।
উদাহরণ
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}ফলাফল
A solid red border
A solid green border
A dotted blue border
“border-color” property ব্যবহার না করলে border-color কাজ করবেনা ।
বিভিন্ন ধরনের কালার নেম
Specific Side Colors
বর্ডার স্টাইল যেমন এক থেকে চারটি ভেলু নিতে আরে, তেমনি বর্ডার কালার ও এক থেকে চারটি ভেলু নিতে পারেন এবং এটিও ক্লক ওয়াইজ করা করে।
উদাহরণ
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}HEX Values
হেক্সাডেসিমেল মান (HEX) ব্যবহার করে বর্ডার এর রঙ নির্দিষ্ট করা যেতে পারে:
উদাহরণ
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}RGB Values
অথবা আরজিবি কালার মান (RGB) ব্যবহার করে বর্ডার এর রঙ নির্দিষ্ট করা যেতে পারে:
উদাহরণ
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}HSL Values
অথবা HSL value ব্যবহার করে বর্ডার এর রঙ নির্দিষ্ট করা যেতে পারে:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}আপনি আমাদের CSS কালার অধ্যায়ে HEX, RGB এবং HSL মান সম্পর্কে আরও জানতে পারেন।