diff --git a/croppie.css b/croppie.css
index 0af2e2c6..dff26211 100644
--- a/croppie.css
+++ b/croppie.css
@@ -35,6 +35,10 @@
     z-index: 0;
 }
 
+.croppie-container .cr-viewport-with-contrast-border {
+    mix-blend-mode: difference;
+}
+
 .croppie-container .cr-resizer {
   z-index: 2;
   box-shadow: none;
diff --git a/croppie.js b/croppie.js
index 5b4cf284..6b0b84c1 100755
--- a/croppie.js
+++ b/croppie.js
@@ -397,6 +397,11 @@
         });
         viewport.setAttribute('tabindex', 0);
 
+
+        if (self.options.viewport.contrastBorder) {
+            addClass(viewport, 'cr-viewport-with-contrast-border');
+        }
+
         addClass(self.elements.preview, 'cr-image');
         setAttributes(self.elements.preview, { 'alt': 'preview', 'aria-grabbed': 'false' });
         addClass(overlay, 'cr-overlay');
@@ -1572,7 +1577,8 @@
         viewport: {
             width: 100,
             height: 100,
-            type: 'square'
+            type: 'square',
+            contrastBorder: false
         },
         boundary: { },
         orientationControls: {