How to add rounded corner to Blazorise card image?

Question

I'm using Blazorise Bulma card component, code like this:

.infobox {
  border-radius: 20px;
}

<Card Class="infobox">
    <CardImage Source="/assets/images/gallery/9.jpg" Alt="Placeholder image">
    </CardImage>
    <CardBody>
        <CardTitle Size="5">Card title</CardTitle>
        <CardText>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </CardText>
        <Button Color="Color.Primary">Button</Button>
    </CardBody>
</Card>

I cannot seem to add a border-radius to the whole card? The infobox class only adds rounded border to the bottom 2 corners. In order to add border-radius to the top 2 corners, I need to access the image element, but CardImage only has attributes source and alt.

Answer 1

You need to add a border then apply border-radius.I have also used display:flex;.You can also use a different background color to the card from the body instead of applying a border.Also, use instead of source. If you need anything else, please let me know.

.infobox {
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color: grey;
  border-radius: 20px;
  width:200px;
  height:100%;
}

.image img{
width:200px;
border-top-left-radius:20px;
border-top-right-radius:20px;

}

.cardtitle{

text-align:center;

}

.btn{
display:flex;
margin-left:auto;
margin-right:auto;
}

<Card Class="infobox">
<div class="image"><img src="https://www.w3schools.com/w3images/avatar2.png" Alt="Placeholder image"/>
    </div>
    <CardBody>
        <h4 class="cardtitle" Size="5">Card title</h4>
        <CardText>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </CardText>
        <Button class="btn" Color="Color.Primary">Button</Button>
    </CardBody>
</Card>