diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 2c20090a4..60f6cfbe2 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -512,7 +512,7 @@ describe('Flowchart', () => {
     );
   });
 
-  it('24.1: Keep node label text (if already defined) when a style is applied', () => {
+  it('24: Keep node label text (if already defined) when a style is applied', () => {
     imgSnapshotTest(
       `graph LR
       A(( )) -->|step 1| B(( ))
@@ -524,7 +524,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+it('25: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
     imgSnapshotTest(
       `graph TB
       TITLE["Link Click Events<br>(click the nodes below)"]
@@ -544,11 +544,13 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
       );
   });
 
-  it('25: Set node text color according to style when html labels are enabled', () => {
+  it('26: Set text color of nodes and links according to styles when html labels are enabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
@@ -560,11 +562,13 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
     );
   });
 
-  it('26: Set node text color according to style when html labels are disabled', () => {
+  it('27: Set text color of nodes and links according to styles when html labels are disabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
diff --git a/dist/index.html b/dist/index.html
index 47293b4b6..9290199cc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -371,8 +371,10 @@ graph TB
   <hr/>
   <div class="mermaid">
     graph LR
-    A[red<br>text] --> B(blue<br>text)
-    C[/red<br/>text/] --> D{blue<br/>text}
+    A[red<br>text] -->|red<br>text| B(blue<br>text)
+    C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+    linkStyle 0 color:red;
+    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
     style A color:red;
     style B color:blue;
     style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
diff --git a/docs/flowchart.md b/docs/flowchart.md
index b6bdabc2f..ee4f0e130 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -497,7 +497,7 @@ Instead of ids, the order number of when the link was defined in the graph is us
 defined in the linkStyle statement will belong to the fourth link in the graph:
 
 ```
-linkStyle 3 stroke:#ff3,stroke-width:4px;
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
 
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index decb382f8..94843de35 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -176,6 +176,25 @@ export const addVertices = function(vert, g, svgId) {
  * @param {Object} g The graph object
  */
 export const addEdges = function(edges, g) {
+  const styleFromStyleArr = function(styleStr, arr, { label }) {
+    if (!label) {
+      // Create a compound style definition from the style definitions found for the node in the graph definition
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          styleStr = styleStr + arr[i] + ';';
+        }
+      }
+    } else {
+      // create the style definition for the text, if property is a text-property
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          if (arr[i].startsWith('color:')) styleStr = styleStr + arr[i] + ';';
+        }
+      }
+    }
+    return styleStr;
+  };
+
   let cnt = 0;
 
   let defaultStyle;
@@ -195,10 +214,11 @@ export const addEdges = function(edges, g) {
     }
 
     let style = '';
+    let labelStyle = '';
+
     if (typeof edge.style !== 'undefined') {
-      edge.style.forEach(function(s) {
-        style = style + s + ';';
-      });
+      style = styleFromStyleArr(style, edge.style, { label: false });
+      labelStyle = styleFromStyleArr(labelStyle, edge.style, { label: true });
     } else {
       switch (edge.stroke) {
         case 'normal':
@@ -215,7 +235,9 @@ export const addEdges = function(edges, g) {
           break;
       }
     }
+
     edgeData.style = style;
+    edgeData.labelStyle = labelStyle;
 
     if (typeof edge.interpolate !== 'undefined') {
       edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear);
@@ -242,6 +264,8 @@ export const addEdges = function(edges, g) {
 
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
+        } else {
+          edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
         }
       }
     }