I have a border that goes around a super short two line text above a picture that is width 500px and height 400px. Is there a way to control the length of the border so it is only 500px in length to make it line up just above the picture? Im not using div and i have tried border-length: 500px but that isnt working and when I tired border-width: 500px it just messed it up. I just want the border around the text to be the same length as the picture to make it look cleaner. (I also know there is probably a lot cleaner way of doing the style then what I have, but I would like to try and keep it in the format I have if possible!) Thank you in advance!!

```css
h2.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h3.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h4.dotted {
  border-style: dotted;
  border-length: 500px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow39.js"></script>

<BODY bgColor="#87CEFA">
  <div id="wrapper">
    <section id="top area">
      <article class="box-right">
        <form action="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/search.php" method="post">
          <Center>
            <h2 class="border"> Search for Content</h2>
            <p>
              <label>Category (Dog, cat, Hamster):</label>
              <input name="category" placeholder="Dog, cat, hamster" type="text">
            </p>
            <!-- Changed Animal type to Animal size(animal_size)-->
            <p>
              <label>Animal size (Large, Small, Small, Tiny/Dawf):</label>
              <input name="animal_size" placeholder="Dawf Hamster" type="text">
            </p>
            <p>
              <input value="Submit" type="submit">
            </p>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
     Return to Main page </a>
            </br>
            <h3 class="border"> Pictures of a few animals we have right now</h3>
            <h4 class="dotted"> Large Dog </br> Name: Tiny</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/bigdog.jpg" alt="Big Dog" Style="width:500px;height:400px;"></br>
            <h4 class="dotted"> Small Dog </br> Name: Yippy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smalldog.jpg" alt="Small Dog" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Cat </br> Name: Teddy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smallcat.jpeg" alt="Small Cat" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Hamster </br> Name: Digger</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/dawfhamster.jpg" alt="Small hamster" Style="width:400px;height:600px;">
            </br>
            </br>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
    Return to Main page </a>
          </center>
        </form>
      </article>
    </section>
  </div>
</body>
```