Cách thiết lập kiểu đường viền ngoài (outline-style) cho phần tử với JavaScript

Thuộc tính outlineStyle (CSS outline-style) xác định kiểu đường viền ngoài (outline) – đường vẽ bên ngoài border, không chiếm diện tích layout.

Ví dụ minh họa

Nhấn nút để thêm outline solid màu xám cho hộp:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 450px;
      background-color: orange;
      border: 3px solid red;
      margin-left: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để thêm Outline Style.</p>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br>
  <button type="button" onclick="display()">Đặt Outline Style</button>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.outlineColor = "#5F5F5F";
      document.getElementById("box").style.outlineStyle = "solid";
    }
  </script>
</body>
</html>

Các giá trị outlineStyle

Outline vs Border

• Outline không chiếm diện tích (không ảnh hưởng layout, không làm dịch chuyển phần tử).
• Outline không có bán kính góc (không tuân theo border-radius).
• Outline vẽ ngoài border (nếu có).
• Dùng cho focus ring, highlight lỗi, debug layout.