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

Thuộc tính outlineWidth (CSS outline-width) đặt độ dày của outline. Không ảnh hưởng layout.

Ví dụ minh họa

Nhấn nút để đặt outline: màu xám, solid, rộng 7px:

<!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 Width.</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 Width</button>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.outlineColor = "#5F5F5F";
      document.getElementById("box").style.outlineStyle = "solid";
      document.getElementById("box").style.outlineWidth = "7px";
    }
  </script>
</body>
</html>

Giá trị outlineWidth

Lưu ý: Outline không hỗ trợ độ rộng khác nhau cho 4 cạnh (khác border). Dùng box-shadow nếu cần kiểm soát chi tiết.