Javascript DOM CSS Style border Property

Introduction

Add a border to a <div> element: 

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

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

</body>
</html>

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

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

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

Property Values

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

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




PreviousNext

Related