How to Change Border Style of Div in JavaScript?

JavaScript – Change the Border Style of Div

To change the border style of a div using JavaScript, get reference to the element, and assign required border style value to the element.style.borderStyle property.

borderStyle property takes one of the following values.

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln"> 
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;h2&gt;</span><span class="pln">Change Border Style of Div in JavaScript</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">:</span><span class="lit">2px</span><span class="pln"> solid green</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">This is a paragraph in Div.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;span&gt;</span><span class="pln">This is a span in Div.</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;br&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">changeStyle</span><span class="pun">()</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Click Me</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> changeStyle</span><span class="pun">(){</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myDiv"</span><span class="pun">);</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">borderStyle </span><span class="pun">=</span><span class="pln"> </span><span class="str">"dashed"</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>