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

বর্ডার ওয়াইডথ (Border Width)

বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে।বর্ডার ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, border-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।থিন বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thin; মিডিয়াম বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:medium; থিক বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thick; 1px বা ১ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে,border-width:1px; 15px বা ১৫ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:15px; ।


কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের ওয়াইডথ এর হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:2px 8px 6px 4px; এখানে ১ম 2px নির্দেশ করে top border ; ২য় 8px নির্দেশ করে right border; ৩য় 6px নির্দেশ করে down border ; ৪র্থ 4px নির্দেশ করে left border।

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

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border-style:solid;}
#thin{border-width:thin;}
#medium{border-width:medium;}
#thick{border-width:thick;}
#1px{border-width:1px;}
#15px{border-width:15px;}
div{border-style:solid;
border-width:2px 8px 6px 4px;}
</style>

</head>
<body >
<h3 id="thin">This is an example of thin border</h3>
<h3 id="medium">This is an example of medium border</h3>
<h3 id="thick">This is an example of thick border</h3>
<h3 id="1px">This is an example of 1px border</h3>
<h3 id="15px">This is an example of 15px border</h3>
<div>
<p>
<h2>This is an example of multi size 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



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

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