giving border radius to ant-design card in react

Question

so, I am having ant-design card that needs a border radius, but if I add Inline CSS, it still not working, I also tried

And here is the follow code:

<Card style = {{width: 300, margin: "20px", borderRadius: "20px"}} actions = {[<h4 style = {{ paddingTop: "6px"}} key="Name">Table Name </h4>,]}></Card>

Is there any way I can control the border radius of this card?

Answer 1

Adding overflow:hidden with borderRadius to the card style will fix the issue of the actions container's corners not being round.

<Card
  style={{
    width: 300,
    margin: "20px",
    borderRadius: "20px",
    overflow: "hidden"
  }}
  actions={[
    <h4 style={{ paddingTop: "6px" }} key="Name">
      Table Name{" "}
    </h4>
  ]}
>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>