title: How to have border with rounded corners as an image and inner background colour to see through?
body: <p>I have div border with inner rounded corners that I want to replace with an image. The image will have opacity, gradient and other Photoshop effects applied to it.</p>
  
  <p>I also want to have the inner div's background colour to see through so that the image of the body is visible. Basically I am after a transparent background in the .inner div.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/EN2XZ/2/" rel="nofollow">http://jsfiddle.net/EN2XZ/2/</a></p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="outer"&gt;
       &lt;div class="inner"&gt;
       ....
       ....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background-image:url('image-url');
    background-size:cover;
    background-repeat:no-repeat;
    padding:50px;
  }
  .outer {
    background-color:#000;
    padding:10px;
  }
  .inner {
    border-radius:10px;
    background-color:#fff;
    padding:5px 15px;
    color:#0000ff;
  }
  </code></pre>