diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 16abe55ea..36b2ed66c 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--card">
       <div class="van-tabs__wrap">
-        <div class="van-tabs__nav van-tabs__nav--card">
+        <div class="van-tabs__nav van-tabs__nav--card" style="border-color:undefined;">
           <!---->
         </div>
       </div>
@@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -156,7 +156,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -183,7 +183,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
@@ -214,7 +214,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index d3bdab567..89c351b5f 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -8,7 +8,7 @@
         { 'van-hairline--top-bottom': type === 'line' }
       ]"
     >
-      <div :class="b('nav', [type])" ref="nav">
+      <div :class="b('nav', [type])" ref="nav" :style="navStyle">
         <div v-if="type === 'line'" :class="b('line')" :style="lineStyle" />
         <div
           v-for="(tab, index) in tabs"
@@ -18,7 +18,7 @@
             'van-tab--active': index === curActive,
             'van-tab--disabled': tab.disabled
           }"
-          :style="{ color }"
+          :style="getTabStyle(tab, index)"
           @click="onClick(index)"
         >
           <span class="van-ellipsis" ref="title">{{ tab.title }}</span>
@@ -109,6 +109,12 @@ export default create({
         default:
           return null;
       }
+    },
+
+    navStyle() {
+      return {
+        borderColor: this.color
+      };
     }
   },
 
@@ -119,6 +125,10 @@ export default create({
       }
     },
 
+    color() {
+      this.setLine();
+    },
+
     tabs(tabs) {
       this.correctActive(this.curActive || this.active);
       this.scrollIntoView();
@@ -338,6 +348,27 @@ export default create({
         const title = this.$refs.title[index];
         title.parentNode.replaceChild(el, title);
       });
+    },
+
+    getTabStyle(item, index) {
+      const style = {};
+      const { color } = this;
+      const active = index === this.curActive;
+      const isCard = this.type === 'card';
+
+      if (color) {
+        if (!item.disabled && isCard !== active) {
+          style.color = color;
+        }
+        if (!item.disabled && isCard && active) {
+          style.backgroundColor = color;
+        }
+        if (isCard) {
+          style.borderColor = color;
+        }
+      }
+
+      return style;
     }
   }
 });
diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css
index 25996d385..751bac953 100644
--- a/packages/vant-css/src/tab.css
+++ b/packages/vant-css/src/tab.css
@@ -72,6 +72,10 @@ $van-tabs-card-height: 30px;
           color: $white;
           background-color: $red;
         }
+
+        &--disabled {
+          color: $gray;
+        }
       }
     }
   }