Javascript DOM CSS Style borderLeft Property

Introduction

Add a left border to a <div> element: 

document.getElementById("myDiv").style.borderLeft = "thick solid #0000FF";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Set left border</button>

<script>
function myFunction() {//w  ww  .ja  v  a2  s  .c o m
  document.getElementById("myDiv").style.borderLeft = "thick solid #0000FF";
}
</script>

</body>
</html>

The borderLeft property sets or gets up to three separate border-left properties in a shorthand form.

With this property, you can set/get one or more of the following:

  • border-left-width
  • border-left-style
  • border-left-color

Property Values

Parameter Description
width the width of the left border
style the style of the left border
color the color of the left border
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The borderLeft property returns a String representing the width, style and/or color of the left border of an element.




PreviousNext

Related