Cách đặt tất cả thuộc tính border-left trong một khai báo bằng JavaScript

Thuộc tính shorthand borderLeft** cho phép bạn đặt đồng thời border-left-width, border-left-style và border-left-color trong một câu lệnh duy nhất.

Ví dụ minh họa

Mã sau thay đổi viền trái của hộp thành dày, nét liền, màu đen:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 200px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="box">Văn bản demo</div>
  <br><br>
  <button type="button" onclick="changeLeftBorder()">Thay đổi viền trái</button>
  <script>
    function changeLeftBorder() {
      document.getElementById("box").style.borderLeft = "thick solid #000000";
      /* Tương đương:
         borderLeftWidth = "thick"
         borderLeftStyle = "solid"
         borderLeftColor = "#000000"
      */
    }
  </script>
</body>
</html>

Thứ tự giá trị (không bắt buộc thứ tự, nhưng thông dụng)

borderLeft = "width style color" — Ví dụ: "5px dashed red", "medium double #00f", "1px solid currentColor".

Các thuộc tính con riêng lẻ

• borderLeftWidth: thin, medium, thick, hoặc độ dài (px, em...)
• borderLeftStyle: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
• borderLeftColor: bất kỳ giá trị màu hợp lệ nào

Mẹo: Nếu bỏ qua color, nó sẽ dùng currentColor (màu chữ hiện tại). Nếu bỏ qua width, mặc định là medium. Nếu bỏ qua style, mặc định là none (viền sẽ không hiện).