title: CSS3 border-radius parent child question
body: <p>Let's say I have this css,</p>
  
  <pre><code>#wrap {width: 190px; padding: 0 10px; border-radius: 10px; background: #000;}
  #wrap a {width: 190px; padding: 10px; display: block;}
  #wrap a:hover {background: #fff;}
  </code></pre>
  
  <p>And this html,</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some Link 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the links fit exactly within the #wrap, but the #wrap has a border radius and a black background. Because on hover the links have a white background, the first child element and last child element sit above the border radius corners. But as they sit <em>on top</em> the background of the #wrap get hidden hiding the border-radius. </p>
  
  <p>I know I can assign the first and last childs a border radius, but is there an easier way to do this?</p>
  
  <p>There are times when assigning the first and last child a border radius will not work, say if I wanted this on my wrapper div,</p>
  
  <pre><code>padding: 5px 10px;
  </code></pre>
  
  <p>Then even if I was to assign a border radius, they will not match making it ugly.</p>