JavaScript Element clientLeft Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CLIENTLEFT

Definition

Element.clientLeft is a read-only integer: the width of the element’s left border in CSS pixels. It excludes left margin and left padding (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.clientLeft. Start with this line.

JavaScript
element.clientLeft
CallWhat it does
element.clientLeftPrimary signature.

Built into the browser. Read or assign el.clientLeft — no import required.

Library declarations
JavaScript
element.clientLeft

Parameters

ParameterDescription
Non-inline elementRequired. Inline always returns 0
Layout completeRequired. Read after styles apply

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read the Left Border Width

Measure a block element with a 24px left border (MDN’s example size).

JavaScript
const box = document.getElementById("box");
// border-left: 24px solid

console.log(box.clientLeft);  // 24
Try It Yourself

How It Works

  1. Find the element. getElementById("box") returns a block box.
  2. Apply a left border. CSS border-left is 24px.
  3. Read clientLeft. It reports that left border width.
  4. Result. 24 — an integer in CSS pixels.

Example 2 — Padding and Margin Do Not Count

Grow left padding and margin — clientLeft stays equal to the border.

JavaScript
const box = document.getElementById("box");
// border-left: 10px; padding-left: 40px; margin-left: 20px

console.log(box.clientLeft);  // 10  (not 10 + 40 + 20)
Try It Yourself

How It Works

  1. Set a 10px left border. That is what clientLeft measures.
  2. Add padding and margin. They affect layout position/size, not this property.
  3. Read again. The value stays 10.
  4. Rule. For inner width/height use clientWidth / clientHeight, not clientLeft.

Example 3 — Inline Elements Return 0

MDN: with display: inline, clientLeft is always 0.

JavaScript
const span = document.getElementById("label");
// display: inline; border-left: 24px solid

console.log(span.clientLeft);  // 0

span.style.display = "inline-block";
console.log(span.clientLeft);  // 24
Try It Yourself

How It Works

  1. Start inline. Even with a 24px left border, clientLeft is 0.
  2. Switch display. inline-block creates a layout box that reports borders.
  3. Read again. Now clientLeft is 24.
  4. Takeaway. Prefer block / inline-block when you need border measurements.
Compatibility

Browser Support

Element.clientLeft is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.clientLeft

Read-only left border width in CSS pixels — long-standing CSSOM View support.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
clientLeft Excellent

Bottom line: Safe for production. Remember inline elements return 0, and RTL overflow can include a left scrollbar width.

Frequently Asked Questions

A read-only integer: the width of the element's left border in CSS pixels. It does not include left margin or left padding.
No. MDN marks Element.clientLeft as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It is read-only. Change the left border with CSS (or element.style), then read clientLeft again.
When there is no left border, or when the element has display: inline — MDN notes inline elements always return 0 regardless of border.
Yes. If the element's text direction is right-to-left and overflow creates a vertical scrollbar on the left, that scrollbar width is included in clientLeft.
clientLeft is the left border width; clientTop is the top border width. Together they describe the border offset into the client area.

Next: clientTop

Learn how to read the width of an element’s top border.

clientTop tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element clientHeight Property JavaScript Element clientTop Property