বর্ডার কালার |সি এস এস বাংলা টিউটোরিয়াল

বর্ডার কালার (Border Color)

বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে।বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow; পিংক কালারের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:pink; rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:rgb(240,060,155); hex পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে,  border-color:#ff0000; বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।

কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#a03090 #f00000 #C06000 #0030F0; এখানে ১ম #a03090 নির্দেশ করে top border color ; ২য় #f00000 নির্দেশ করে right border color; ৩য় #C06000 নির্দেশ করে down border color; ৪র্থ #0030F0; নির্দেশ করে left border color ;

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>

body{background:#00CC99;}
h3{border-style:solid;}
#yellow{border-color:yellow;}
#pink{border-color:pink;}
#rgb{border-color:rgb(240,060,155);}
#hex{border-color:#ff0000;}
#transparent{border-color:transparent;}
div{border-style:solid;
border-color:#a03090 #f00000 #C06000 #0030F0;}
</style>

</head>
<body >
<h3 id="yellow">This is an example of yellow border</h3>
<h3 id="pink">This is an example of pink border</h3>
<h3 id="rgb">This is an example of rgb border</h3>
<h3 id="hex">This is an example of hex border</h3>
<h3 id="transparent">This is an example of transparent border</h3>
<div>
<p>
<h2>This is an example of multi colour border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২