HTML DOM Style border Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Style border property is used to get or set the border properties for an element. It is a shorthand property for border-width, border-style and border-color.

Syntax

Following is the syntax for −

Setting the border property −

object.style.border = "width style color|initial|inherit"

Parameters

The above properties as explained as follow −

Sr.NoParameters & Description
1Width
For setting the border width
2Style
For setting the border width
3Color
For setting the border width
4Initial
For setting this property to initial value.
5Inherit
To inherit the parent property value.

Example

Let us look at an example for the border property −

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border: 2px solid orange;
      box-shadow: 2px 2px 4px 1px seagreen;
   }
</style>
<script>
   function changeBorder(){
      document.getElementById("IMG1").style.border="4px dotted pink";
      document.getElementById("Sample").innerHTML="The border for the image is now changed";
   }
</script>
</head>
<body>
<h2>Learn XAMARIN</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/xamarin/images/xamarin-minilogo.jpg">  
<p>Change the above image border clicking the below button</p>
<button onclick="changeBorder()">CHANGE BORDER</button>
<p id="Sample"></p>
</body>
</html>

Output

This will produce the following output −

On clicking the CHANGE BORDER −

raja
Published on 20-Aug-2019 09:05:20
Advertisements