HTML DOM বর্ডার স্টাইল প্রপার্টি একটি এলিমেন্টের জন্য বর্ডার স্টাইল প্রপার্টি পেতে বা সেট করার জন্য শর্টহ্যান্ড হিসেবে ব্যবহার করা হয়। এটি নিম্নলিখিত উপায়ে এক থেকে 4টি মান নেয় -
-
এটি ঘড়ির কাঁটার দিকে সীমানা-শৈলী নির্ধারণ করে যদি সমস্ত 4টি মান দেওয়া হয়।
-
যদি শুধুমাত্র একটি মান দেওয়া হয় তবে একই শৈলী সমস্ত 4টি বর্ডারে প্রয়োগ করা হয়।
-
যদি দুটি মান দেওয়া হয় তাহলে উপরে এবং নীচে প্রথম মান এবং বাম এবং ডান দ্বিতীয় মান সেট করা হয়।
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার স্টাইল প্রপার্টি সেট করা হচ্ছে:
object.style.borderLeftStyle = value
উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বিবরণ |
|---|---|
| কোনটিই নয় | এটি কোনো সীমানা উল্লেখ না করে ডিফল্ট মান। |
| লুকানো | এটি "কোনটিই নয়" এর মতো কিন্তু তবুও সীমানা স্থান নেবে৷ এটা মূলত স্বচ্ছ কিন্তু এখনও আছে. |
| ডটেড | এটি একটি বিন্দুযুক্ত সীমানা সংজ্ঞায়িত করে। |
| ড্যাশ করা | এটি একটি ড্যাশ বর্ডার সংজ্ঞায়িত করে। |
| সলিড | এটি একটি কঠিন সীমানা নির্ধারণ করে। |
| ডাবল | এটি একটি ডবল বর্ডার সংজ্ঞায়িত করে |
| খাঁজ | এটি একটি 3d খাঁজ সীমানা নির্ধারণ করে এবং এটি রিজের বিপরীত। |
| রিজ | এটি একটি 3D রিজড বর্ডার সংজ্ঞায়িত করে এবং এটি খাঁজের বিপরীত |
| ইনসেট | এটি একটি 3D ইনসেট সীমানা সংজ্ঞায়িত করে এবং প্রভাবটি মনে হচ্ছে এটি এমবেড করা আছে৷ এটি শুরুর বিপরীত প্রভাব তৈরি করে। |
| আউটসেট | এটি একটি 3D ইনসেট সীমানা সংজ্ঞায়িত করে এবং প্রভাবটি মনে হচ্ছে এটি এমবসড। এটি ইনসেটের বিপরীত প্রভাব তৈরি করে। |
| প্রাথমিক | প্রাথমিক মান এই সম্পত্তি সেট করার জন্য। |
| উত্তরাধিকার | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পেতে |
বর্ডার স্টাইল প্রপার্টি −
এর একটি উদাহরণ দেখা যাকউদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle(){
document.getElementById("DIV1").style.borderStyle="dashed";
document.getElementById("Sample").innerHTML="The border style is now changed to dashed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border style by clicking the below button</p>
<button onclick="changeBorderStyle()">Change Border Style</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
"চেঞ্জ বর্ডার স্টাইল" ক্লিক করলে বোতাম -
