I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have:
<div id="card1">
<div id="card1i"></div>
</div>
Below is the CSS for the card:
#card1 {
border-radius: 2%;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.80);
}
I also want to add a title within the card that has a different background color, achieved by adding a second div (card1i):
#card1i {
width: 250px;
height: 50px;
background-color: rgb(212, 202, 202);
}
However, when I add the second div for the title, it removes the rounded top corners of the original card. Adding border-radius to the second div causes all corners to become round, which is not the desired effect. Is there a way to only round the top corners of the second div, or perhaps a completely different approach to creating this card?