HTML DOM Element clientLeft

❮ Previous ❮ Element Object Reference Next ❯

Example

Display the width of myDIV's top and left border:

const elmnt = document.getElementById("myDIV");
let text = "Border top width: " + elmnt.clientTop + "px<br>";
text += "Border left width: " + elmnt.clientLeft + "px";

Try it Yourself »

More examples below.

Description

The clientLeft property returns the width of the element's left border, in pixels.

The clientLeft property does not include the element's left padding or left margin.

The clientLeft property is read-only.

Note

The style.borderLeftWidth Property also returns the width of an element's left border.

Tutorial:

CSS Box Model

Syntax

element.clientLeft

Return Value

Type	Description
Number	The width of the element's left border, in pixels.

More Examples

In this example, the text direction of "myDIV" is right-to-left, and it has a scrollbar:

let left = document.getElementById("myDIV").clientLeft;