text: Q:
  
  CSS3 Box Shadow Direction
  
  I'm a total CSS3 noob, so please bear with me. I have the following HTML:
  <input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span>
  
  ... with the following CSS applied to the "input" field and "span" tag:
  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;
  }
  
  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 Twitter sign-up page. If you click on each input field field, you will get a general idea of the way my input and span tags are styled.
  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?
  Please note I am trying to support both Mozilla and Webkit rendering engines in this CSS.
  Thank you for your time,
  spryno724
  
  A:
  
  use inner-wrap and use     
  box-shadow: -5px 0 0px #FFFFFF;
  
  http://jsfiddle.net/pramendra/y67Yt/3/
  
  