React中如何为ant-design的Card组件设置border-radius圆角

原因说明 #

你给Card设置的borderRadius属性本身已经生效，视觉上看起来没有圆角是因为Card内部的内容区、底部actions栏默认是直角样式，会溢出Card的圆角边界，掩盖了圆角效果。

可用解决方案 #

• 方法1：直接修改行内样式（适合单张卡片临时调整）
  只需在原有行内样式中新增overflow: "hidden"属性，裁剪内部溢出的直角内容即可：

  <Card 
    style = {{
      width: 300, 
      margin: "20px", 
      borderRadius: "20px",
      overflow: "hidden"
    }} 
    actions = {[
      <h4 style = {{ paddingTop: "6px"}} key="Name">Table Name </h4>,
    ]}
  >
    {/* 卡片内部内容 */}
  </Card>
  

• 方法2：自定义CSS类控制（适合多卡片复用样式）
  先给Card组件绑定自定义类名：

  <Card className="custom-radius-card" {...其余原有属性}>...</Card>
  

  再在CSS文件中添加对应样式，还可单独调整actions栏的样式适配圆角：

  .custom-radius-card {
    width: 300px;
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
  }
  /* 可选：调整actions栏样式，去掉默认上边框更协调 */
  .custom-radius-card .ant-card-actions {
    border-top: none;
  }
  

• 方法3：全局配置统一圆角（适合全站卡片风格统一）
  如果你使用的是antd v5及以上版本，可以通过ConfigProvider全局配置Card组件的圆角属性，所有项目内的Card都会继承该样式：

  import { ConfigProvider } from 'antd';
  
  export default function App() {
    return (
      <ConfigProvider
        theme={{
          components: {
            Card: {
              borderRadiusLG: 20,
            },
          },
        }}
      >
        {/* 你的项目根组件内容 */}
      </ConfigProvider>
    )
  }
  

内容的提问来源于stack exchange，提问作者Alyasa