title: How can I add outer rounded corners to a div?
body: <p>I'm looking to add "outer" rounded corners to the selected sidebar item to give the effect that this item is "pouring" into the content well.</p>
  
  <p>In my example below, I'd like the <code>.top</code> to have a rounded bottom-right corner with a gray background, along with a similar top-right corner for the <code>.bottom</code>.  What do you think?</p>
  
  <p>I'm using Twitter Bootstrap and LESS, if that makes it easier.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/3YXb2/" rel="nofollow noreferrer">http://jsfiddle.net/3YXb2/</a></p>
  
  <p>Turn this:</p>
  
  <p><img src="https://i.stack.imgur.com/ODTqg.png" alt="rendered"></p>
  
  <p>Into this:</p>
  
  <p><img src="https://i.stack.imgur.com/Ibm8b.png" alt="enter image description here"></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="sidebar"&gt;
          &lt;div class="top"&gt;
              &lt;p&gt;Top&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="middle"&gt;
              &lt;p&gt;Middle&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="bottom"&gt;
              &lt;p&gt;Bottom&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;p&gt;Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin:10px;
  }
  div {
      margin:0;
      margin-right:-4px;
      padding:0;
      display:inline-block;
      vertical-align:middle;
  }
  .wrapper {
      width:100%;
      display:block;
      border:1px solid;
  }
  .container {
      background-color:gray;
      width:70%;
      height:300px;
  }
  .sidebar {
      background-color:white;
      width:30%;
      height:300px;
  }
  .middle {
      background-color:gray;
  }
  .top,.middle,.bottom {
      width:100%;
      height:100px;
      display:block;
  }
  p {
      padding:40px 0 0;
      margin:0;
      text-align:center;
  }
  </code></pre>