วิธีตั้งค่าสีขอบล่าง (Bottom Border Color) ด้วย JavaScript DOM

ใช้ Property style.borderBottomColor ของ Element เพื่อตั้งค่าสีของขอบล่าง (Bottom Border) แยกจากขอบอื่นๆ ได้

Syntax

element.style.borderBottomColor = "color_value";

color_value สามารถเป็น: Named Color ("red", "blue"), Hex ("#ff0000", "#f00"), RGB ("rgb(255,0,0)"), RGBA ("rgba(255,0,0,0.5)"), HSL, HSLA, transparent, currentColor, inherit

ตัวอย่างครบ: กดปุ่มเปลี่ยนสีขอบล่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px dashed blue;   /* ขอบทั้ง 4 ด้าน */
      width: 120px;
      height: 120px;
      margin: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button onclick="changeBottomBorderColor()">เปลี่ยนสีขอบล่างเป็นสีเหลือง</button>
  <div id="box">
    <p>Demo Text</p>
    <p>Demo Text</p>
  </div>

  <script>
    function changeBottomBorderColor() {
      const box = document.getElementById("box");
      box.style.borderBottomColor = "yellow"; // หรือ "gold", "#ffd700", "rgb(255,255,0)"
    }
  </script>
</body>
</html>

Properties ขอบที่เกี่ยวข้อง (Individual Border Sides)

Side	Color Property	Width Property	Style Property	Shorthand
Top	`borderTopColor`	`borderTopWidth`	`borderTopStyle`	`borderTop`
Right	`borderRightColor`	`borderRightWidth`	`borderRightStyle`	`borderRight`
Bottom	`borderBottomColor`	`borderBottomWidth`	`borderBottomStyle`	`borderBottom`
Left	`borderLeftColor`	`borderLeftWidth`	`borderLeftStyle`	`borderLeft`

Shorthand สำหรับตั้งค่าทีละด้าน

// ตั้งค่าขอบล่างทั้ง 3 อย่างพร้อมกัน
element.style.borderBottom = "3px solid red";

// ตั้งค่าขอบทั้ง 4 ด้าน
element.style.border = "1px solid black";

การอ่านค่าปัจจุบัน (Get Computed Style)

const box = document.getElementById("box");
// Inline Style (ถ้าตั้งผ่าน style attribute/property)
console.log(box.style.borderBottomColor); // "yellow" หรือ "" ถ้ายังไม่ตั้ง

// Computed Style (รวม CSS จาก Stylesheet)
const computed = window.getComputedStyle(box);
console.log(computed.borderBottomColor); // "rgb(255, 255, 0)" - เสมอเป็น RGB/RGBA

Best Practices

ใช้ borderBottom Shorthand หากตั้ง Width, Style, Color พร้อมกัน (สั้นกว่า อ่านง่ายกว่า)
ใช้ CSS Classes แทน Inline Styles สำหรับ Production (Maintainable, Performant)
JavaScript Toggle Class: box.classList.toggle('highlight-bottom')

<style>
  .highlight-bottom { border-bottom: 3px solid gold !important; }
</style>

<script>
  box.classList.toggle('highlight-bottom');
</script>

สรุป

element.style.borderBottomColor = "color" ตั้งค่าสีขอบล่างเฉพาะด้าน | ใช้ Shorthand borderBottom สำหรับตั้ง Width+Style+Color พร้อมกัน | แนะนำ Toggle CSS Class แทน Inline Style สำหรับแอปจริง