'How to round the corners of a card (body and image) in Bootstrap 4?

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.

Wireframe card: https://imgur.com/a/XQHaltk

Current card in browser: https://imgur.com/a/kqmBGq4

I've managed to "fix" the border radius of my card image with a custom css

.img-rounded{
    border-radius: 20%;
}

However, I still need to make my card element rounded (like the picture of the wireframe). What's the best way of doing this?

Card HTML:

<div class="card" style="width: 18rem;">
                <img src="./assets/img/1.jpg" class="card-img-top " alt="Jelo 1">
                <div class="card-body">
                    <h5 class="card-title text-center">Recipe name</h5>
                    <p class="card-text mb-4">Some quick example text to build on the Recipe name and make up the bulk of the card's content.</p>
                    <div class="container mb-2">
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Open</a>
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Edit</a>
                        <a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Delete</a>
                    </div>
                </div>
            </div>
htmlcss


Solution 1:[1]

It is simple and can be achieved by simple CSS only. Just as you have added border-radius to the image you have to add the same to the parent element also which holds the content and images...

Let's say you have <div class="card">, inside it you have <div class="content">, and then you have your image, So kindly try adding the same border-radius to <div class="content"> as well. It should solve the problem for you.

Solution 2:[2]

You can just add the same rule border-radius: 20% to the card element.

Solution 3:[3]

Thank you! Adding border-radius: 20% helped!

Solution 4:[4]

Just add the same CSS border to both the classes i.e. <div class="card"> and <div class="content">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hardik Sisodia
Solution 2 L. Männer
Solution 3 Marko Marchisio
Solution 4 Ritesh Gupta

Related Questions