title: Rounded inside border-radius in css without nested divs
body: <p>I want to set rounded inside border <code>border-radius</code> ,(not outer <code>border-radius</code>) to my element without nested div's.</p>
  
  <p>My idea is like this picture:</p>
  
  <p><img src="https://i.stack.imgur.com/YMYFk.jpg" alt="enter image description here"></p>
  
  <p>html source on 
  <a href="http://jsfiddle.net/pmXDv/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
      #s{
          width:200px;
          height: 200px;
          border:8px solid green ;
          border-radius:8px;
          background-color: red;
          margin:0 auto;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="s" &gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is this possible in css3?</p>