giving border radius to ant-design card in react

user_16641699 0
Viewed 2869

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?

antd reactjs css
3 Answers

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>

Edit antd reproduction template (forked)

user_53853810

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

Card content

Card content

Card content

user_185468140
user_98699780
Related