How To Use CSS Style Border Properties In JavaScript

Posted By Bajarangi soft , Posted On 29-09-2020

In Java script we can draw border on click of button so today in this article we discuss how to draw border on click of button using java script

How To Use CSS Style Border Properties In JavaScript

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

With this property, you can set/return one or more of the following (in any order):

border-width
border-style
border-color

Syntax and Usage

Return the border property:
object.style.border

Set the border property:
object.style.border = "width style color|initial|inherit"

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.

Border-Width

The borderWidth property sets or returns the width of an element's border.

This property can take from one to four values:

One value, like: p {border-width: thick} - all four borders will be thick
Two values, like: p {border-width: thick thin} - the top and bottom border will be thick, left and right border will be thin
Three values, like: p {border-width: thick thin medium}- the top border will be thick, left and right border will be thin, bottom border will be medium
Four values, like: p {border-width: thick thin medium 10px} - the top border will be thick, right border will be thin, bottom border will be medium, left border will be 10px

Example(1)

<style>
    #Div {
        border-style: solid;
    }
</style>
</head>
<body>

<div id="Div">Am div element.</div>
<br>
<button type="button" onclick="draw()">Change width of the four borders</button>

<script>
    function draw() {
        document.getElementById("Div").style.borderWidth = "thick";
    }
</script>

In above example when i click button it will change the width of the four borders of a <div> element:

Border-style
The borderColor property sets or returns the color of an element's border.

This property can take from one to four values:

One value, like: p {border-color: red} - all four borders will be red
Two values, like: p {border-color: red transparent} - top and bottom border will be red, left and right border will be transparent
Three values, like: p {border-color: red green blue}- top border will be red, left and right border will be green, bottom border will be blue
Four values, like: p {border-color: red green blue yellow} - top border will be red, right border will be green, bottom border will be blue, left border will be yellow

Example(2)

<style>
    #Div {
        border: thick solid blue;
    }
</style>

<div id="Div">This is a div.</div>
<br>
<button type="button" onclick="draw()">Change color of the four borders</button>

<script>
    function draw() {
        document.getElementById("Div").style.borderColor = "red";
    }
</script>

In above example when i click button it wil change the color of the four borders of a <div> element to red

Border-color

The borderColor property sets or returns the color of an element's border.

This property can take from one to four values:

One value, like: p {border-color: red} - all four borders will be red
Two values, like: p {border-color: red transparent} - top and bottom border will be red, left and right border will be transparent
Three values, like: p {border-color: red green blue}- top border will be red, left and right border will be green, bottom border will be blue
Four values, like: p {border-color: red green blue yellow} - top border will be red, right border will be green, bottom border will be blue, left border will be yellow

Example(3)

<style>
    #Div {
        border: thick solid blue;
    }
</style>
</head>
<body>

<div id="Div">This is a div.</div>
<br>
<button type="button" onclick="draw()">Change color of the four borders</button>

<script>
    function draw() {
        document.getElementById("Div").style.borderColor = "red";
    }
</script>

In above example when you click button it will change the color of the four borders of a <div> element to red

Compelete code for CSS Style Border Properties In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use CSS Style Border Properties In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color: red;

    }
    #DIV1 {
        border-style: solid;
    }
    #DIV2 {
        border: thick solid blue;
    }
    #DIV3 {
        border-style: solid;
    }
</style>

<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use CSS Style Border Properties In JavaScript</h1>
    </div>
    <br>
    <h3>Change color of the four borders</h3>
        <div class="col-md-4">

            <div id="DIV1">
                <h2>Hello</h2>
            </div>
            <br>
            <button class="btn btn-primary" type="button" onclick="draw1()">Draw</button>
        </div>
    <div class="col-md-4">
        <div id="DIV2">
            <h2>Hello</h2>
        </div>
        <br>
        <button class="btn btn-primary" type="button" onclick="draw2()">Draw</button>
    </div>
    <div class="col-md-4">
        <div id="DIV3">
            <h2>Hello</h2>
        </div>
        <br>
        <button class="btn btn-primary" type="button" onclick="draw3()">Draw</button>
    </div>
</body>
</html>
<script>
    function draw1() {
        document.getElementById("DIV1").style.borderWidth = "thick";
    }
    function draw2() {
        document.getElementById("DIV2").style.borderColor = "";
    }
    function draw3() {
        document.getElementById("DIV3").style.borderColor = "pink";
    }
</script>

Related Post