JavaScript Element clientLeft Property

What You’ll Learn

Element.clientLeft is a read-only instance property that returns the width of an element’s left border in pixels. Learn what it includes and excludes, why display: inline returns 0, and how it pairs with clientTop—with five examples and try-it labs.

Introduction

The client area is the padded content box inside the borders. clientLeft tells you how wide the left border is—the gap from the outer edge of the border to where the padding/content starts.

It does not include left margin or left padding. In rare RTL + overflow cases, a left vertical scrollbar width can be included too.

const el = document.getElementById("contained");
console.log(el.clientLeft); // e.g. 24 for border-left: 24px

Understanding the Property

MDN: the clientLeft read-only property of the Element interface returns the width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction is right-to-left and overflow causes a left vertical scrollbar. It does not include the left margin or the left padding.

• Read-only — change CSS borders, then read again.
• Integer pixels — left border thickness.
• Inline caveat — display: inline always returns 0.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

clientLeft

Value

An integer: the left border width in pixels (plus an RTL left scrollbar when applicable).

📋 MDN Border Example Shape

MDN uses a box with a 24px black left border. The white client area starts after that border, so clientLeft is 24:

#contained {
  margin: 1rem;
  border-left: 24px black solid;
  padding: 0 28px;
  overflow: auto;
  background-color: white;
}

const el = document.getElementById("contained");
console.log(el.clientLeft); // 24

Related learning: clientTop, clientHeight, clientWidth, and getBoundingClientRect().

Examples Gallery

Examples follow MDN Element: clientLeft. Labs use a block box with a thick left border so the value is easy to predict.

const el = document.getElementById("contained");
console.log(el.clientLeft); // 24

24

const span = document.getElementById("label");
console.log(span.clientLeft); // 0 when display:inline

0

const el = document.getElementById("box");
// border-left: 12px; padding-left: 40px; margin-left: 30px
console.log(el.clientLeft); // 12

12

const el = document.getElementById("box");
console.log({
  clientLeft: el.clientLeft,
  clientTop: el.clientTop,
  clientWidth: el.clientWidth,
  clientHeight: el.clientHeight
});

{
  "clientLeft": 12,
  "clientTop": 8,
  "clientWidth": 200,
  "clientHeight": 100
}

console.log({
  supported: "clientLeft" in Element.prototype,
  measures: "left border width (px)",
  tip: "Inline elements return 0; padding/margin are excluded",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "measures": "left border width (px)",
  "tip": "Inline elements return 0; padding/margin are excluded",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Measuring thick accent borders for custom layout math.
• Converting between border-box and client-area coordinates.
• Debugging unexpected offsets when borders are uneven.
• Pairing with clientTop for 2D border thickness.
• Teaching the difference between border, padding, and margin.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — change border-left to change the value.
• display: inline always yields 0.
• Related: clientHeight, clientTop, EventTarget, JavaScript hub.

💡 Best Practices