title: Border Radius only rounding the top of my divs?
body: <p>I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!</p>
  
  <p>The CSS code I'm using is here:</p>
  
  <pre class="lang-css prettyprint-override"><code>#buttonRow {
      position:relative;
      width:980px;
      height:60px;
      margin-left:51px;
      margin-bottom:25px;
      float:left;
  }
  
  #button {
      position:relative;
      float:left;
      width:120px;
      height:60px;
      margin-left:25px;
      padding-top:10px;
      border-radius:5px;
      background-image:url('../assets/buttons/generic_button.png');
      background-repeat:no-repeat;
  }
  
  #singleLineButton {
      position:relative;
      float:left;
      width:120px;
      height:60px;
      margin-left:25px;
      padding-top:20px;
      border-radius:5px;
      background-image:url('../assets/buttons/generic_button.png');
      background-repeat:no-repeat;
  }
  
  #buttonText {
      width:120px;
      height:auto;
      color:#FFFFFF;
      text-align:center;
      font-size:16px;
      font-family: Adobe Kaiti Std R;
  }
  </code></pre>
  
  <p>And the output is this:</p>
  
  <p><img src="https://i.stack.imgur.com/fFTq9.png" alt="Rounded Divs"></p>
  
  <p>Why is it only showing the top corners as rounded?!</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Thanks, Zulu</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the HTML for those asking:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="buttonRow"&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php"&gt;
          &lt;div id="button"&gt;&lt;div id="buttonText"&gt;Individual Table Management&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php"&gt;
          &lt;div id="singleLineButton"&gt;&lt;div id="buttonText"&gt;Attendance&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php"&gt;
          &lt;div id="singleLineButton"&gt;&lt;div id="buttonText"&gt;School Members&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php"&gt;
          &lt;div id="singleLineButton"&gt;&lt;div id="buttonText"&gt;Search&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php"&gt;
          &lt;div id="singleLineButton"&gt;&lt;div id="buttonText"&gt;School Details&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php"&gt;
          &lt;div id="singleLineButton"&gt;&lt;div id="buttonText"&gt;Users&lt;/div&gt;&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>