সিএসএস border-width প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-width | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
border-width প্রোপার্টি একটি এলিমেন্টের চারটি বর্ডারের প্রস্থকে সেট করে। এই প্রোপার্টির একটি থেকে চারটি ভ্যালু থাকতে পারে।
উদাহরণঃ
- border-width:thin medium thick 10px;
- উপরের বর্ডারের width কম
- ডানের বর্ডারের width মিডিয়াম
- নিচের বর্ডারের width বেশি
- বামের বর্ডার ১০পিক্সেল
- border-width:thin medium thick;
- উপরের বর্ডারের width কম
- ডান এবং বামের বর্ডারের width মিডিয়াম
- নিচের বর্ডারের width বেশি
- border-width:thin medium;
- উপরের এবং নিচের বর্ডারের width কম
- ডান এবং বামের বর্ডারের width মিডিয়াম
- border-width:thin;
- চারটি বর্ডারের width কম
পরামর্শঃ
- সর্বদা border-style প্রোপার্টিকে border-width প্রোপার্টির আগে ঘোষনা করতে হবে। একটি এলিমেন্টের অবশ্যই প্রস্থ সেট করার আগে বর্ডার থাকতে হবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| medium | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
border-width: medium/thin/thick/length/initial/inherit;
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
border-style: solid;
border-width: 5px;
}
p.p2 {
border-style: solid;
border-width: medium;
}
p.p3 {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="p1">কিছু টেক্সট...</p>
<p class="p2">কিছু টেক্সট....</p>
<p class="p3">কিছু টেক্সট....</p>
<p><b>নোট:</b> "border-width" প্রোপার্টি যদি এককভাবে ব্যবহার করা হয় তাহলে এটি কাজ করবে না।
এই জন্য সাথে "border-style" প্রোপার্টি ব্যবহার করতে হবে।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.borderWidth="5px 15px"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDIV {
border: 7px solid blue;
width: 350px;
height: 300px;
color:brown;
}
</style>
</head>
<body>
<p> " পরিবর্তন করি" বাটনে ক্লিক করে DIV এলিমেন্টের border-width পরিবর্তন করি: </p>
<button onclick="myFunction()">পরিবর্তন করি</button>
<div id="thisDIV">
<h1>স্যাট একাডেমী</h1>
</div>
<script>
function myFunction() {
document.getElementById("thisDIV").style.borderWidth = "5px 15px";
}
</script>
</body>
</html>
ফলাফল
border-width প্রোপার্টির ভ্যালু-সমূহ
- medium - একটি মিডিয়াম ভ্যালু নির্ধারণ করে। এটি ডিফল্ট।
- thin -সরু বর্ডার নির্দেশ করে ।
- thick -পুরু বর্ডার নির্দেশ করে।
- length - ডানপাশের বর্ডারের পুরুত্ব নির্দেশ করতে সাহায্য করে ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
border-width প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।