CSS বর্ডার রঙ (CSS Border Color) [বাংলায় CSS মাস্টার ক্লাস]:
ওয়েব ডিজাইনের জগতে, CSS (ক্যাসকেডিং স্টাইল শীট) এর সুচিন্তিত ব্যবহার দৃশ্যত আকর্ষণীয় এবং আকর্ষক ওয়েবসাইট তৈরির জন্য সর্বোত্তম। ওয়েব ডেভেলপারের সিএসএস টুলকিটের অনেকগুলো টুলের মধ্যে বর্ডার-কালার প্রপার্টি, যা HTML এলিমেন্টের চেহারা ও অনুভূতি নির্ধারণে গুরুত্বপূর্ণ ভূমিকা পালন করে। বর্ডার-কালার প্রপার্টি ডেভেলপারদের একটি উপাদানের সীমানার রঙ কাস্টমাইজ করে দেয়। কীওয়ার্ড, হেক্সাডেসিমেল কোড, RGB, বা HSL মান ব্যবহার করে রঙের মান নির্দিষ্ট করে, ডিজাইনাররা একটি ওয়েবসাইটের সামগ্রিক ভিজ্যুয়াল থিমের সাথে সারিবদ্ধ সীমানা তৈরি করতে পারে। আপনার যদি একটি উপাদানের নির্দিষ্ট দিকের জন্য বিভিন্ন রঙের প্রয়োজন হয়, আপনি বর্ডার-টপ-কালার, বর্ডার-ডান-কালার, বর্ডার-বটম-কালার এবং বর্ডার-বাম-রঙের মতো বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। বিস্তারিত এই স্তর সৃজনশীল এবং অপ্রতিসম সীমানা নকশা জন্য অনুমতি দেয়।
কিছু বর্ডার কালার এর ধরন নিচে দেওয়া হল।
- border-top-color: green;
- border-right-color: yellow;
- border-bottom-color: black;
- border-left-color: red;
CSS বর্ডার রঙ (CSS Border Color) [বাংলায় CSS মাস্টার ক্লাস] সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<button class="button1">Button</button>
<button class="button2">Button</button>
<button class="button3">Button</button>
<button class="button4">Button</button>
<button class="button5">Button</button>
<style>
/* choose any: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
/* Example:1 */
.button1{
/* add border-style */
border-style: dotted;
/* add border-width */
border-width: 5px;
/* add border-color */
border-color: blue;
}
/* Example:2*/
.button2{
border-style: dashed;
border-color: red;
}
/* Example:3*/
.button3{
border-style: solid;
border-color: magenta;
}
/* Example:4*/
.button4{
border-style: ridge;
border-color: orange;
}
/* Example:5*/
.button5{
border-style: outset;
border-color: orangered;
}
</style>
</body>
</html>