title: CSS3 fallback for older browsers
body: <p>I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.</p>
  
  <p>I know I could use a background image as a backup, but doesnt this defeat the point of using code?</p>
  
  <p>If i was to put  background-image in, where would it go in the CSS?</p>
  
  <pre><code>.ButtonB:hover, .ButtonB.hover {
      background: -moz-linear-gradient(
          center top,
          rgba(255, 255, 255, .2) 0%,
          rgba(255, 255, 255, .1) 100%
      );/* FF3.6 */
      background: -webkit-gradient(
          linear,
          center bottom,
          center top,
          from(rgba(255, 255, 255, .1)),
          to(rgba(255, 255, 255, .2))
      );/* Saf4+, Chrome */
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
  }
  </code></pre>