title: How to give a border to an anchor tag's background image?
body: <p>How can I give and adjust the border just around the background image of a anchor tag ?
  Now I have a border of my anchor tags as the width and height are predefined. Can I give border around the background images of these anchor tags namely "Next" and "Prev" ??</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;jQuery UI Dialog: Hide the Close Button/Title Bar&lt;/title&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  
    &lt;style type="text/css"&gt;
  
      .mySlider
      {
         //
      }
  
      .shadow_div
      {
        //
      }
  
      .mySlider img
      {
          width:800px;
          height:480px;
          display:none;
  
      }
  
      .Parent_Slider &gt; a
      {
          text-decoration:none;
          font-weight:bold;
          width:32px;
          height:32px;
          position:absolute;
          top:45%;
          text-indent:-9999px;
      }
  
      .Next_Class
      {
          right:282px;
          background-image:url(Images/rightarrow.jpg);
          border:1px solid white;
      }
  
      .Prev_Class
      {
          left:282px;
          background-image:url(Images/leftarrow.jpg);
      }
  
      ul.Round_Buttons
      {
          position:relative;
          left:35%;
          top:5px;
          text-decoration:none;
          list-style-type:none;
          text-indent:-9999px
      }
  
     ul.Round_Buttons li
     {
         float:left;
         background-color:white;
         margin:1px 5px;
         padding:0px 7px;
         border-radius:50%;
         border-width:1px;
         border:1px solid #3610a5;
         cursor:pointer;
         box-shadow:1px -1px 3px 1px #3610a5;
         transition:all 1s ease-in-out;
         -moz-transition:all 1s ease-in-out;
         -webkit-transition:all 1s ease-in-out;
  
     }
  
      ul.Round_Buttons li:hover
      {
          transform:rotate(-360deg);
          -webkit-transform:rotate(-360deg);
          -moz-transform:rotate(-360deg);
      }
  
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
        //
  
  
      });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="Parent_Slider"&gt;
      &lt;div id="my_image_slider" class="mySlider"&gt;
          &lt;img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/&gt;
          &lt;img id="2" src="Images/audi.jpg" alt="" title="BMW India" /&gt;
          &lt;img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" /&gt;
          &lt;img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" /&gt;
          &lt;img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" /&gt;
      &lt;/div&gt;
      &lt;a href="#" class="Next_Class"&gt;Next&lt;/a&gt;
      &lt;a href="#" class="Prev_Class"&gt;Prev&lt;/a&gt;
  &lt;/div&gt;
      &lt;div class="shadow_div" &gt;
          &lt;ul class="Round_Buttons"&gt;
              &lt;li id="1st_Round"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
              &lt;li id="2nd_Round"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li id="3rd_Round"&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
              &lt;li id="4th_Round"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;li id="5th_Round"&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>
  </p>