diff --git a/addons/xterm-addon-canvas/src/CursorRenderLayer.ts b/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
index b35cdbbc..2ef1d072 100644
--- a/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/CursorRenderLayer.ts
@@ -58,7 +58,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._cursorRenderers = {
       'bar': this._renderBarCursor.bind(this),
       'block': this._renderBlockCursor.bind(this),
-      'underline': this._renderUnderlineCursor.bind(this)
+      'underline': this._renderUnderlineCursor.bind(this),
+      'outline': this._renderOutlineCursor.bind(this)
     };
     this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
     this._handleOptionsChanged();
@@ -150,13 +151,9 @@ export class CursorRenderLayer extends BaseRenderLayer {
       this._ctx.save();
       this._ctx.fillStyle = this._themeService.colors.cursor.css;
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
-      if (this._optionsService.rawOptions.cursorInactiveStyle === 'outline') {
-        this._renderBlurCursor(cursorX, viewportRelativeCursorY, this._cell);
-      } else if (this._optionsService.rawOptions.cursorInactiveStyle === 'line') {
-        this._cursorRenderers['bar'](cursorX, viewportRelativeCursorY, this._cell);
-      } else if (this._optionsService.rawOptions.cursorInactiveStyle === 'underline') {
-        this._cursorRenderers['underline'](cursorX, viewportRelativeCursorY, this._cell);
-      } else {
+      const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
+      if (cursorInactiveStyle && cursorInactiveStyle !== 'none') {
+        this._cursorRenderers[cursorInactiveStyle](cursorX, viewportRelativeCursorY, this._cell);
       }
       this._ctx.restore();
       this._state.x = cursorX;
@@ -238,7 +235,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._ctx.restore();
   }
 
-  private _renderBlurCursor(x: number, y: number, cell: ICellData): void {
+  private _renderOutlineCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.strokeStyle = this._themeService.colors.cursor.css;
     this._strokeRectAtCell(x, y, cell.getWidth(), 1);
diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts
index f7d190ee..9bd30cb5 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts
@@ -455,21 +455,24 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Override colors for cursor cell
         if (isCursorVisible && row === cursorY) {
+          const inactiveCursorStyle = this._getInactiveCursorStyle(terminal.options.cursorInactiveStyle);
           if (x === cursorX) {
             this._model.cursor = {
               x: cursorX,
               y: this._terminal.buffer.active.cursorY,
               width: cell.getWidth(),
               style: this._coreBrowserService.isFocused ?
-                (terminal.options.cursorStyle || 'block') : this._getInactiveCursorStyle(terminal.options.cursorInactiveStyle),
+                (terminal.options.cursorStyle || 'block') : inactiveCursorStyle,
               cursorWidth: terminal.options.cursorWidth,
               dpr: this._devicePixelRatio
             };
             lastCursorX = cursorX + cell.getWidth() - 1;
           }
           if (x >= cursorX && x <= lastCursorX &&
-              this._coreBrowserService.isFocused &&
-              (terminal.options.cursorStyle || 'block') === 'block') {
+              ((this._coreBrowserService.isFocused &&
+              (terminal.options.cursorStyle || 'block') === 'block') ||
+              (this._coreBrowserService.isFocused === false &&
+              inactiveCursorStyle === 'block'))) {
             this._cellColorResolver.result.fg =
               Attributes.CM_RGB | (this._themeService.colors.cursorAccent.rgba >> 8 & Attributes.RGB_MASK);
             this._cellColorResolver.result.bg =
@@ -601,17 +604,20 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._onRequestRedraw.fire({ start: cursorY, end: cursorY });
   }
 
-  private _getInactiveCursorStyle(cursorInactiveStyle: 'outline' | 'line' | 'underline' | 'none'): string {
+  private _getInactiveCursorStyle(cursorInactiveStyle: 'outline' | 'block' | 'bar' | 'underline' | 'none'): string {
     if (cursorInactiveStyle === 'outline') {
       return 'blur';
     }
-    if (cursorInactiveStyle === 'line') {
+    if (cursorInactiveStyle === 'block') {
+      return 'block';
+    }
+    if (cursorInactiveStyle === 'bar') {
       return 'bar';
     }
-    if (cursorInactiveStyle === 'underline'){
+    if (cursorInactiveStyle === 'underline') {
       return 'underline';
     }
-    return 'block';
+    return '';
   }
 }
 
diff --git a/demo/client.ts b/demo/client.ts
index b5c67208..c9111fec 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -419,7 +419,7 @@ function initOptions(term: TerminalType): void {
   ];
   const stringOptions = {
     cursorStyle: ['block', 'underline', 'bar'],
-    cursorInactiveStyle: ['outline', 'line', 'underline', 'none'],
+    cursorInactiveStyle: ['outline', 'block', 'bar', 'underline', 'none'],
     fastScrollModifier: ['none', 'alt', 'ctrl', 'shift'],
     fontFamily: null,
     fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 5a83427a..e607ae3e 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -197,28 +197,20 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
-      ` outline: 1px solid ${colors.cursor.css};` +
-      ` outline-offset: -1px;` +
-      `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
-      ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` +
-      `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
-      ` border-bottom: 1px ${colors.cursor.css};` +
-      ` border-bottom-style: solid;` +
-      ` height: calc(100% - 1px);` +
-      `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
       ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` background-color: ${colors.cursor.css};` +
       ` color: ${colors.cursorAccent.css};` +
       `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
+      ` outline: 1px solid ${colors.cursor.css};` +
+      ` outline-offset: -1px;` +
+      `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
       ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` +
       `}` +
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index 4471b34e..89468dd4 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -216,7 +216,9 @@ export class DomRendererRowFactory {
               case 'outline':
                 classes.push(RowCss.CURSOR_STYLE_OUTLINE_CLASS);
                 break;
-              case 'line':
+              case 'block':
+                classes.push(RowCss.CURSOR_STYLE_BLOCK_CLASS);
+              case 'bar':
                 classes.push(RowCss.CURSOR_STYLE_BAR_CLASS);
                 break;
               case 'underline':
diff --git a/src/common/Types.d.ts b/src/common/Types.d.ts
index c605e5fa..fceb4e8e 100644
--- a/src/common/Types.d.ts
+++ b/src/common/Types.d.ts
@@ -38,7 +38,7 @@ export interface ITerminalOptions extends IPublicTerminalOptions {
 
 export type CursorStyle = 'block' | 'underline' | 'bar';
 
-export type CursorInactiveStyle = 'outline' | 'line' | 'underline' | 'none';
+export type CursorInactiveStyle = 'outline' | 'block' | 'bar' | 'underline' | 'none';
 
 export type XtermListener = (...args: any[]) => void;
 
diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts
index 78c3bf71..23aab9b5 100644
--- a/typings/xterm.d.ts
+++ b/typings/xterm.d.ts
@@ -72,7 +72,7 @@ declare module 'xterm' {
     /**
      * The style of the inactive cursor.
      */
-    cursorInactiveStyle?: 'outline' | 'line' | 'underline' | 'none';
+    cursorInactiveStyle?: 'outline' | 'block' | 'bar' | 'underline' | 'none';
 
     /**
      * Whether to draw custom glyphs for block element and box drawing characters instead of using