title: CSS3 Box Shadow Direction
body: <p>I'm a total CSS3 noob, so please bear with me. I have the following HTML:</p>
  
  <pre><code>&lt;input name="firstName" id="firstName" type="text"&gt;&lt;span class="tip"&gt;Just a tip&lt;/span&gt;
  </code></pre>
  
  <p>... with the following CSS applied to the "input" field and "span" tag:</p>
  
  <pre><code>input[type="text"], input[type="password"], textarea {
      border-top:1px solid #5F5F5F;
      border-left:1px solid #5F5F5F;
      border-bottom:1px solid #5F5F5F;
      border-right:1px solid #5F5F5F;
      border-top-left-radius:5px;
      border-bottom-left-radius:5px;
      padding:10px;
      width:200px;
  }
  
  input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
      border: 1px solid #22C3EB;
      -webkit-box-shadow: 0 0 5px #22C3EB;
      -moz-box-shadow: 0 0 5px #22C3EB;
      box-shadow: 0 0 5px #22C3EB;
  }
  
  input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
      border: 1px solid #972324;
      -webkit-box-shadow: 0 0 5px #972324;
      -moz-box-shadow: 0 0 5px #972324;
      box-shadow: 0 0 5px #972324;
  }
  
  .tip {
      font-size:11px;
      border-top:1px solid #22C3EB;
      border-right:1px solid #22C3EB;
      border-bottom:1px solid #22C3EB;
      border-left:1px solid #5F5F5F;
      border-bottom-right-radius:5px;
      border-top-right-radius:5px;
      padding:12px 10px 10px 10px;
      width:200px;
  }
  
  .tip:hover {
      border: 1px solid #22C3EB;
      -webkit-box-shadow: 0 0 5px #22C3EB;
      -moz-box-shadow: 0 0 5px #22C3EB;
      box-shadow: 0 0 5px #22C3EB;
  }
  </code></pre>
  
  <p>Basically, it is a rounded text field, with another span tag on the right, which also has rounded outer edges. It looks similar to the <a href="https://twitter.com/signup" rel="nofollow">Twitter sign-up page</a>. If you click on each input field field, you will get a general idea of the way my input and span tags are styled.</p>
  
  <p>Is there a way to prevent the "box-shadow" from casting a shadow between the "input" and "span" fields? So, no shadow on the right side of the "input" field, and no shadow on the left side of the "span" tag?</p>
  
  <p>Please note I am trying to support both Mozilla and Webkit rendering engines in this CSS.</p>
  
  <p>Thank you for your time,<br>
  spryno724</p>