diff --git a/docs/en-US/component/card.md b/docs/en-US/component/card.md
index a340ec0289..a510e619de 100644
--- a/docs/en-US/component/card.md
+++ b/docs/en-US/component/card.md
@@ -51,13 +51,15 @@ card/shadow
 
 ### Attributes
 
-| Name                 | Description                                                    | Type                              | Default |
-| -------------------- | -------------------------------------------------------------- | --------------------------------- | ------- |
-| header               | title of the card. Also accepts a DOM passed by `slot#header`  | ^[string]                         | —       |
-| footer ^(2.4.3)      | footer of the card. Also accepts a DOM passed by `slot#footer` | ^[string]                         | —       |
-| body-style           | CSS style of card body                                         | ^[object]`CSSProperties`          | —       |
-| body-class ^(2.3.10) | custom class name of card body                                 | ^[string]                         | —       |
-| shadow               | when to show card shadows                                      | ^[enum]`always \| never \| hover` | always  |
+| Name                  | Description                                                    | Type                              | Default |
+| --------------------- | -------------------------------------------------------------- | --------------------------------- | ------- |
+| header                | title of the card. Also accepts a DOM passed by `slot#header`  | ^[string]                         | —       |
+| footer ^(2.4.3)       | footer of the card. Also accepts a DOM passed by `slot#footer` | ^[string]                         | —       |
+| body-style            | CSS style of card body                                         | ^[object]`CSSProperties`          | —       |
+| header-class ^(2.9.8) | custom class name of card header                               | ^[string]                         | —       |
+| body-class ^(2.3.10)  | custom class name of card body                                 | ^[string]                         | —       |
+| footer-class ^(2.9.8) | custom class name of card footer                               | ^[string]                         | —       |
+| shadow                | when to show card shadows                                      | ^[enum]`always \| never \| hover` | always  |
 
 ### Slots
 
diff --git a/packages/components/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx
index 65e89c8723..cc78bbd1f2 100644
--- a/packages/components/card/__tests__/card.test.tsx
+++ b/packages/components/card/__tests__/card.test.tsx
@@ -59,11 +59,22 @@ describe('Card.vue', () => {
     ).toBe('font-size:14px;color:blue;')
   })
 
-  test('should render body-class props', async () => {
+  test('should render header-class, body-class and footer-class  props', async () => {
     const bodyClass = 'test-body-class'
-    const wrapper = mount(() => <Card body-class={bodyClass} />)
+    const headerClass = 'test-header-class'
+    const footerClass = 'test-footer-class'
+    const wrapper = mount(() => (
+      <Card
+        header-class={headerClass}
+        body-class={bodyClass}
+        footer-class={footerClass}
+        v-slots={{ header: () => <div />, footer: () => <div /> }}
+      />
+    ))
 
     expect(wrapper.find('.el-card__body').classes()).toContain(bodyClass)
+    expect(wrapper.find('.el-card__header').classes()).toContain(headerClass)
+    expect(wrapper.find('.el-card__footer').classes()).toContain(footerClass)
   })
 
   test('shadow', () => {
diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 223c8d71cf..71f0d263ac 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -20,10 +20,18 @@ export const cardProps = buildProps({
     type: definePropType<StyleValue>([String, Object, Array]),
     default: '',
   },
+  /**
+   * @description custom class name of card footer
+   */
+  headerClass: String,
   /**
    * @description custom class name of card body
    */
   bodyClass: String,
+  /**
+   * @description custom class name of card footer
+   */
+  footerClass: String,
   /**
    * @description when to show card shadows
    */
diff --git a/packages/components/card/src/card.vue b/packages/components/card/src/card.vue
index c8243d231d..cad2207e69 100644
--- a/packages/components/card/src/card.vue
+++ b/packages/components/card/src/card.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="[ns.b(), ns.is(`${shadow}-shadow`)]">
-    <div v-if="$slots.header || header" :class="ns.e('header')">
+    <div v-if="$slots.header || header" :class="[ns.e('header'), headerClass]">
       <slot name="header">{{ header }}</slot>
     </div>
     <div :class="[ns.e('body'), bodyClass]" :style="bodyStyle">
       <slot />
     </div>
-    <div v-if="$slots.footer || footer" :class="ns.e('footer')">
+    <div v-if="$slots.footer || footer" :class="[ns.e('footer'), footerClass]">
       <slot name="footer">{{ footer }}</slot>
     </div>
   </div>