title: How do I give a border around the <area coords>?
body: <p>I want a border around the active link part of the image that is defined by the coordinates. I currently have implemented to the extent that when the user clicks, the outline is visible by using: outline-color, thanks to href. I need a border around the coordinates specified by default.
  I am not very much experienced in CSS, so some guidance would be appreciated.
  If I need to mark it at respective intervals. Would use of javascript be a good practice?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  img[usemap], map area[shape]{
      outline-color: #F00;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;img src="unnamed.png" usemap="#mark"&gt;
  
  &lt;map name="mark"&gt;
      &lt;area shape="rect" coords="10,10,50,50" href="#"&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>
  </p>