title: How to round the corners of a card (body and image) in Bootstrap 4?
body: <p>I'm trying to build a responsive web interface for a mock "recipe app". Currently im using bootstrap 4 and i'm having trouble with customizing my card element to match my wireframe.</p>
  
  <p>Wireframe card: <a href="https://imgur.com/a/XQHaltk" rel="noreferrer">https://imgur.com/a/XQHaltk</a></p>
  
  <p>Current card in browser: <a href="https://imgur.com/a/kqmBGq4" rel="noreferrer">https://imgur.com/a/kqmBGq4</a></p>
  
  <p>I've managed to "fix" the border radius of my card image with a custom css</p>
  
  <pre><code>.img-rounded{
      border-radius: 20%;
  }
  </code></pre>
  
  <p>However, I still need to make my card element rounded (like the picture of the wireframe). What's the best way of doing this? </p>
  
  <p>Card HTML:</p>
  
  <pre><code>&lt;div class="card" style="width: 18rem;"&gt;
                  &lt;img src="./assets/img/1.jpg" class="card-img-top " alt="Jelo 1"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;h5 class="card-title text-center"&gt;Recipe name&lt;/h5&gt;
                      &lt;p class="card-text mb-4"&gt;Some quick example text to build on the Recipe name and make up the bulk of the card's content.&lt;/p&gt;
                      &lt;div class="container mb-2"&gt;
                          &lt;a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;"&gt;Open&lt;/a&gt;
                          &lt;a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;"&gt;Edit&lt;/a&gt;
                          &lt;a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;"&gt;Delete&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>