diff --git a/src/diagrams/class/styles.js b/src/diagrams/class/styles.js
index bf237241e..43399af28 100644
--- a/src/diagrams/class/styles.js
+++ b/src/diagrams/class/styles.js
@@ -11,6 +11,11 @@ const getStyles = options =>
   }
 }
 
+.divider {
+  stroke: $nodeBorder;
+  stroke: 1;
+}
+
 g.clickable {
   cursor: pointer;
 }
@@ -47,15 +52,51 @@ g.classGroup line {
   stroke-dasharray: 3;
 }
 
-#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
-  fill: ${options.lineColor};
-  stroke: ${options.lineColor};
+#compositionStart, .composition {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
-#aggregationStart, #aggregationEnd  {
-    fill: ${options.nodeBkg};
-  stroke: ${options.lineColor};
+#compositionEnd, .composition {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#dependencyStart, .dependency {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#dependencyStart, .dependency {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#extensionStart, .extension {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#extensionEnd, .extension {
+  fill: ${options.lineColor} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#aggregationStart, .aggregation {
+  fill: ${options.nodeBkg} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#aggregationEnd, .aggregation {
+  fill: ${options.nodeBkg} !important;
+  stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 `;