use border-bottom instead of box-shadow for underline cursor

In rare cases, box-shadow can cause aliasing artifacts on the top and
sides of the cursor box when only the bottom should be filled in to
create an underline.

This replaces the box-shadow style with border-bottom which should be
pixel perfect in all cases.

Fixes: https://github.com/xtermjs/xterm.js/issues/4580

src/browser/renderer/dom/DomRenderer.ts

@@ -168,7 +168,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     styles +=
       `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
       ` 50% {` +
-      `  box-shadow: none;` +
+      `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
@@ -205,7 +205,9 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
-      ` box-shadow: 0 -1px 0 ${colors.cursor.css} inset;` +
+      ` border-bottom: 1px ${colors.cursor.css};` +
+      ` border-bottom-style: solid;` +
+      ` height: calc(100% - 1px);` +
       `}`;
     // Selection
     styles +=