HTML DOM Style borderImage প্রপার্টি

borderImage প্রপার্টি ব্যবহার করে একটি এলিমেন্টের বর্ডার ইমেজ সেট বা গেট করা হয়। এটি একটি শর্টহ্যান্ড প্রপার্টি, ফলে borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset এবং borderImageRepeat প্রপার্টিগুলো একসাথে ম্যানিপুলেট করা যায়।

সিনট্যাক্স

borderImage প্রপার্টি সেট করার সিনট্যাক্স:

object.style.borderImage = "source slice width outset repeat|initial|inherit"

মানসমূহ

উদাহরণ

borderImage প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> <style> 
  #PARA1 { 
    border: 15px solid transparent; 
    padding: 12px; 
    border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch; 
    width: 100px; 
  } 
</style> 
<script> 
  function changeBorderImage(){ 
    document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/images/mongodb.png') 20 round"; 
    document.getElementById("Sample").innerHTML="The border image is now changed"; 
  } 
</script> 
</head> 
<body> 
<h2>Learning is fun</h2> 
<p id="PARA1">This is a sample paragraph. Here is another line</p> 
<p>Change the above paragraph border image by clicking the below button</p> 
<button onclick="changeBorderImage()">Change Border Image</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে:

COLLAPSE BORDER বাটনে ক্লিক করলে: