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

HTML DOM borderImageRepeat প্রপার্টি ব্যবহার করে বর্ডার ইমেজে ইমেজ স্লাইসগুলো কীভাবে রিপিট হবে তা সংজ্ঞায়িত করা হয়। এটি সেট বা গেট করে যে borderImage রাউন্ডেড, রিপিটেড বা স্ট্রেচড হবে।

সিনট্যাক্স

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

object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"

মানসমূহ

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> 
  #b1 { 
    border: 30px solid transparent; 
    padding: 5px; 
    border-image-source:  
    url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg"); 
    border-image-repeat: repeat; 
    border-image-slice: 30; 
  } 
</style> 
<script> 
  function changeBorderRepeat(){ 
    document.getElementById("b1").style.borderImageRepeat="stretch"; 
    document.getElementById("Sample").innerHTML="The border image will now be stretched"; 
  } 
</script> 
</head> 
<body> 
<h2>Demo Heading</h2> 
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p> 
<p>Change the above div border image repeat property by clicking the below button</p> 
<button onclick="changeBorderRepeat()">Change Border Repeat</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

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

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