Javascript Reference - HTML DOM Style borderTop Property








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

With borderTop property, we can set and get one or more of the following.

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




Browser Support

borderTop Yes Yes Yes Yes Yes

Syntax

Return the borderTop property:

var v = object.style.borderTop

Set the borderTop property:

object.style.borderTop='width style color|initial|inherit'

Property Values

Parameter Description
width Set the width of the top border
style Set the style of the top border
color Set the color of the top border
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: not specified
Return Value: A string representing the top border width, style and color
CSS Version CSS1

Example

The following code shows how to add a top border to a <div> element:


<!DOCTYPE html>
<html>
<body>
<!-- ww  w  .  jav a  2  s.c  o  m-->
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderTop = "thick solid #0000FF";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the width, style and color of the top border.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--   ww  w . j  ava  2  s .  c  o m-->
    border: thick solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderTop = "thin dotted red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the border-top property values of a <div> element.


<!DOCTYPE html>
<html>
<body>
<!-- www  . ja  v a  2s.  co  m-->
<div id="myDiv" style="border-top:5px solid red;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.borderTop);
}
</script>
</body>
</html>

The code above is rendered as follows: