Javascript DOM CSS Style borderTop Property

Introduction

Add a top border to a <div> element: 

document.getElementById("myDiv").style.borderTop = "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 top border</button>

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

</body>
</html>

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

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

  • border-top-width
  • border-top-style
  • border-top-color

Property Values

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

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




PreviousNext

Related