title: CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied
body: <p>I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge.</p>
  
  <p>In Adobe Illustrator I have created the following 'button' style.</p>
  
  <p><img src="https://i.stack.imgur.com/XEfCG.jpg" alt="Button style screenshot"></p>
  
  <p>To create this image I created a rectangle with a background colour of <code>rgb(63,64,63)</code> or <code>#3F403F</code>, then 'stylized' it to have a 15px border radius.</p>
  
  <p>I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center.  Finally, I applied a 3pt white stroke on it. (I'm telling you all of this in case you wished to reproduce it, if the image above isn't sufficient.)</p>
  
  <p>So, my question is thus: </p>
  
  <p><em>Is it possible to recreate this 'button' using CSS without the need for an image?</em> </p>
  
  <p>I am aware of the 'limitations' of Internet Explorer (and for the sake of this experiment, I couldn't give a monkeys). I am also aware of the small 'bug' in webkit which incorrectly renders an element with a background colour, border-radius and a border (with a different color to the background-color) - it lets the background color bleed through on the curved corners.</p>
  
  <p>My best attempt so far is fairly pathetic, but for reference here is the code:</p>
  
  <pre><code>section#featured footer p a
  {
      color: rgb(255,255,255);
      text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border: 3px solid rgb(255,255,255);
      background: rgb(98,99,100);
  
      background: -moz-radial-gradient(
          50% 50%, 
          farthest-side, 
          #626364, 
          #545454
      );
      background: -webkit-gradient(
          radial, 
          50% 50%,
          1px,
          50% 50%,
          5px,
          from(rgb(98,99,100)),
          to(rgb(84,84,84))
      );
  }
  </code></pre>
  
  <p>Basically, terrible. Any hints or tips gratefully accepted and thank you very much in advance for them!</p>