title: How to create a box with rounded corners at the top, but normal corners at the bottom?
body: <p>I'm having the following code:</p>
  
  <pre><code>&lt;div class="box"&gt; 
   &lt;div class="title"&gt;
    &lt;a&gt;Title&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="content"&gt;
    &lt;a&gt;Content&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to style it with CSS and become the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/dPzn8.png" alt="Box with rounded corners"></p>
  
  <p>However, I don't know how to style the 'title' part as I want it. The top corners should be rounded, but the ones at the bottom shouldn't. Vice versa for the 'content' part.</p>
  
  <p>How can I do that?</p>