How to set the color of the outline around an element with JavaScript?

---

<p style="">To set the outline color, use the <em>outlineColor</em> property. You can try to run the following code to set the color of the outline around an element with JavaScript:</p><h2>Example</h2><p style=""><a href="http://tpcg.io/Xa5RsQ" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#box { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 450px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 3px solid red; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;Click below to add Outline Color.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;box&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;br&gt; &nbsp; &nbsp; &nbsp; &lt;button type=&quot;button&quot; onclick=&quot;display()&quot;&gt;Set Outline Color&lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;br&gt; &nbsp; &nbsp; &nbsp; &lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function display() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;box&quot;).style.outline = &quot;thick solid&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;box&quot;).style.outlineColor = &quot;#5F5F5F&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• How to set the width of the outline around an element with JavaScript?
• How to set the style of the outline around an element with JavaScript?
• How to set outline color with JavaScript?
• Set the color of the outline with CSS
• Set the background color of an element with CSS
• How to set the color of an elements border with JavaScript?
• How to set the padding of an element with JavaScript?
• How to set the height of an element with JavaScript?
• How to set the margins of an element with JavaScript?
• How to return the background color of an element with JavaScript DOM?
• How to set the top position of an element with JavaScript?
• How to set the bottom padding of an element with JavaScript?
• How to set the left padding of an element with JavaScript?
• How to set the top padding of an element with JavaScript?
• How to set the right padding of an element with JavaScript?