title: changing button tag border color
body: <p>I have put an image in border-less <code>button</code> tag. When the button is selected with <kbd>Tab</kbd>, a brown border appears around the image. How do I change color of that rectangle from brown to white. Is is possible to have a white rectangle with inner and outer shadow of blue.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;td align=center valign=middle&gt;
    &lt;figure&gt;
      &lt;button style="background-color:black; height:160px;width:160px ; border:none"&gt;
          &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt;
      &lt;/button&gt;
      &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt;
  
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/a9ERx.png" alt=""></p>
  
  <p>I can change highlight color by using <code>style=outline-color:white</code></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;body&gt;
          &lt;tr&gt;
              &lt;td align=center valign=middle&gt;
                  &lt;figure&gt;
                      &lt;button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"&gt;
                          &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt;
                      &lt;/button&gt;
                      &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt;
  
                      &lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/td&gt;
              &lt;td align=center valign=middle&gt;
                  &lt;figure&gt;
                      &lt;button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"&gt;
                          &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt;
                      &lt;/button&gt;
                      &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt;
  
                      &lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/hXHsl.png" alt=""></p>
  
  <p>Here is my initial page load image and if I press <kbd>Tab</kbd> I get a highlight similar to what is shown</p>
  
  <p><img src="https://i.stack.imgur.com/UOSpA.png" alt=""> </p>
  
  <p>How do I increase the rectangle width.</p>