JavaScript Element clientTop Property

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

Definition

Element.clientTop is a read-only integer: the width of the element’s top border in CSS pixels. MDN: it equals border-top-width, rounded to an integer.

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

Syntax

Use el.clientTop. Start with this line.

JavaScript
element.clientTop
CallWhat it does
element.clientTopPrimary signature.

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

Library declarations
JavaScript
element.clientTop

Parameters

ParameterDescription
Layout completeRequired. Read after styles apply

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read the Top Border Width

Measure a box with a 24px top border (MDN’s example size).

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

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

How It Works

  1. Find the element. getElementById("box") returns the node.
  2. Apply a top border. CSS border-top is 24px.
  3. Read clientTop. It reports that top border width.
  4. Result. 24 — same as rounded border-top-width.

Example 2 — Padding and Margin Do Not Count

Grow top padding and margin — clientTop stays equal to the border.

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

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

How It Works

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

Example 3 — Pair with clientLeft

Read both border offsets on the same element.

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

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

How It Works

  1. Set unequal borders. Top is 24px, left is 8px.
  2. Read clientTop. Reports the top border → 24.
  3. Read clientLeft. Reports the left border → 8.
  4. Together. They describe how far the client area is inset by borders.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.clientTop

Read-only top 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
clientTop Excellent

Bottom line: Safe for production. Remember it equals border-top-width (rounded) and ignores padding/margin.

Frequently Asked Questions

A read-only integer: the width of the element's top border in CSS pixels. MDN notes it is always equal to border-top-width, rounded to an integer.
No. MDN marks Element.clientTop as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It is read-only. Change the top border with CSS (or element.style), then read clientTop again.
offsetTop points at the top of the border box (not the margin). The client area starts just below the border, so the gap between them is the top border — clientTop.
When the computed border-top-width is zero. Padding and margin do not change clientTop.
clientTop is the top border width; clientLeft is the left border width. Together they describe the client area's border offset.

Next: clientWidth

Learn how to read an element’s inner width including padding.

clientWidth 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 clientLeft Property JavaScript Element clientWidth Property