JavaScript Element clientTop Property

What You’ll Learn

Element.clientTop is a read-only instance property that returns the width of an element’s top border in pixels. Learn how it matches border-top-width, how it relates to offsetTop, and how it pairs with clientLeft—with five examples and try-it labs.

Introduction

The client area is the padded content box inside the borders. clientTop tells you how thick the top border is—the gap from the outer top of the border box to where the padding/content starts.

MDN puts it simply: clientTop is always equal to the computed border-top-width, rounded to an integer. If that width is zero, so is clientTop.

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

Understanding the Property

MDN: the clientTop read-only property of the Element interface returns the width of the top border of an element in pixels.

All that lies between offsetTop and the start of the client area is the element’s top border. offsetTop marks the top of the border (not the margin), while the client area begins immediately below the border (including padding). That distance is clientTop.

• Read-only — change CSS borders, then read again.
• Integer pixels — top border thickness.
• Matches CSS — equals border-top-width (rounded).
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

clientTop

Value

An integer: the top border width in pixels.

📋 MDN Border Example Shape

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

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

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

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

Examples Gallery

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

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

24

const el = document.getElementById("box");
const cssTop = parseFloat(getComputedStyle(el).borderTopWidth);
console.log({
  clientTop: el.clientTop,
  borderTopWidth: cssTop
});

{
  "clientTop": 16,
  "borderTopWidth": 16
}

const el = document.getElementById("box");
// border-top: 0; padding-top: 40px
console.log(el.clientTop); // 0

0

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

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

console.log({
  supported: "clientTop" in Element.prototype,
  measures: "top border width (px)",
  tip: "Equals border-top-width (rounded); padding is excluded",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "measures": "top border width (px)",
  "tip": "Equals border-top-width (rounded); padding is excluded",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Measuring thick header/accent borders for custom layout math.
• Converting between border-box and client-area coordinates.
• Debugging unexpected vertical offsets when top borders change.
• Pairing with clientLeft for 2D border thickness.
• Teaching how offsetTop relates to the client area.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — change border-top to change the value.
• Equals border-top-width, rounded to an integer.
• Related: clientLeft, clientWidth, EventTarget, JavaScript hub.

💡 Best Practices