JS - Element properties

The property returns the width of the element's left border, in pixels. It does not include the element's left padding or left margin. The property is read-only.

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

code:

                <div>
                    <p>Display the width of DIV's top and left border:</p>
                    <div id=DIV>
                        <p id="prop"></p>
                    </div>
                </div>
                <style>
                    #DIV {height: 250px; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid black; 
                        border-left: 10px solid red;  background-color: lightblue;}
                </style>
                <script>
                    const element = document.getElementById("DIV");
                    let text = "clientTop: " + element.clientTop + "px<br>";
                    text += "clientLeft: " + element.clientLeft + "px";
                    document.getElementById("prop").innerHTML = text;
                </script>

The text direction of this div is right-to-left.
And it has a scrollbar!

            <div id="DIV1">
                The text direction of this div is right-to-left.<br>
                And it has a scrollbar!
                <p id="prop1"></p>
              </div>
              <style>
                #DIV1 { height: 250px; width: 400px;  padding: 10px;  margin: 15px;  border-left: 10px solid red; 
                     background-color: lightblue; direction: rtl; overflow: scroll;}
              </style>
              <script>
                let left = document.getElementById("DIV1").clientLeft;
                document.getElementById("prop1").innerHTML = "Border left width: " + left + "px";
              </script>

JS - element properties - clientLeft

returns the width of the left border of an element.