Cách dịch chuyển outline (outline-offset) vẽ ra ngoài cạnh border với JavaScript

Thuộc tính outlineOffset (CSS outline-offset) tạo khoảng trống giữa border và outline, làm outline vẽ ra xa hơn.

Ví dụ minh họa

Nhấn nút để đặt outline offset 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 Offset.</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 Offset</button>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.outline = "thick solid";
      document.getElementById("box").style.outlineColor = "#5F5F5F";
      document.getElementById("box").style.outlineOffset = "7px";
    }
  </script>
</body>
</html>

Đặc điểm outlineOffset

• Giá trị: độ dài (px, em, rem), có thể âm (outline đè lên border).
• Mặc định: 0 (outline dính liền border).
• Không ảnh hưởng layout (giống outline).
• Hữu ích cho focus ring rõ ràng: outline: 2px solid blue; outline-offset: 2px;