JavaScript Element clientWidth Property

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

Definition

Element.clientWidth is a read-only integer: the element’s inner width in CSS pixels. It includes padding and excludes borders, margins, and vertical scrollbars (MDN).

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

Syntax

Use el.clientWidth. Start with this line.

JavaScript
element.clientWidth
CallWhat it does
element.clientWidthPrimary signature.

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

Library declarations
JavaScript
element.clientWidth

Parameters

ParameterDescription
Compare propertyOptional. offsetWidth / scrollWidth for other questions

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read clientWidth

Measure a fixed-width box with no padding.

JavaScript
const box = document.getElementById("box");
// width: 200px; border: 5px; padding: 0; box-sizing: content-box

console.log(box.clientWidth);  // 200
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the element.
  2. Read the property. clientWidth is the inner width in CSS pixels.
  3. Ignore the border. A 5px border does not change clientWidth.
  4. Result. With width 200 and no padding → 200.

Example 2 — Padding Is Included

Add horizontal padding and watch the measurement grow.

JavaScript
const box = document.getElementById("box");
// width: 200px; padding: 10px; border: 5px; box-sizing: content-box

console.log(box.clientWidth);  // 220  (200 + 10 + 10)
Try It Yourself

How It Works

  1. Start from content width. CSS width is 200px.
  2. Add padding. Left and right padding each add 10.
  3. Skip the border. Borders are outside the client area for this property.
  4. Total. 200 + 10 + 10 = 220.

Example 3 — vs offsetWidth and scrollWidth

Compare the three common width measurements on one element.

JavaScript
const box = document.getElementById("box");
// width: 200px; padding: 10px; border: 5px; content-box

console.log(box.clientWidth);   // 220  (content + padding)
console.log(box.offsetWidth);   // 230  (+ borders)
console.log(box.scrollWidth);   // ≥ 220 (grows if content overflows)
Try It Yourself

How It Works

  1. Client area. clientWidth = content + padding → 220.
  2. Border box. offsetWidth usually adds left/right borders → 230.
  3. Scrollable size. scrollWidth matches when content fits; grows on overflow.
  4. Pick by question. Visible inner width → clientWidth; full border box → offsetWidth.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.clientWidth

Read-only inner 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
clientWidth Excellent

Bottom line: Safe for production. Remember root-element reads return viewport width, and inline / no-CSS elements return 0.

Frequently Asked Questions

A read-only integer: the element's inner width in CSS pixels, including padding but excluding borders, margins, and vertical scrollbars (if present).
No. MDN marks Element.clientWidth as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It is read-only. Change layout with CSS (or element.style), then read clientWidth again.
Roughly CSS width + CSS padding − width of a vertical scrollbar if one is present. Inline elements and elements with no CSS return 0.
On the root <html> element (or <body> in quirks mode), clientWidth returns the viewport width excluding any scrollbar.
offsetWidth is the border-box width (includes borders, and often scrollbars). scrollWidth is the full scrollable content width, which can be larger than the visible client area.

Next: currentCSSZoom

Learn how to read an element’s effective CSS zoom factor.

currentCSSZoom 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 clientTop Property JavaScript Element currentCSSZoom Property