คุณสมบัติ HTML DOM Style borderBottom

คุณสมบัติ borderBottom ใช้สำหรับตั้งค่าหรือรับคุณสมบัติขอบล่าง (bottom border) เป็น shorthand ของ border-bottom-width, border-bottom-style, border-bottom-color

ไวยากรณ์ (Syntax)

object.style.borderBottom = "width style color|initial|inherit"

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #IMG1 { 
    border-bottom: 7px solid orange; 
    box-shadow: 2px 2px 4px 1px seagreen; 
  } 
</style> 
<script> 
  function changeBorder(){ 
    document.getElementById("IMG1").style.borderBottom="10px dotted pink"; 
    document.getElementById("Sample").innerHTML="The bottom border for the image is now changed"; 
  } 
</script> </head> 
<body> 
<h2>Kotlin Tutorial</h2> 
<img id="IMG1" src="https://www.tutorialspoint.com/kotlin/images/kotlin.jpg"> 
<p>Change the above image below border by clicking the below button</p> 
<button onclick="changeBorder()">Change Bottom Border</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม "Change Bottom Border":