diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index b29543ef..cf878dcf 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -438,8 +438,10 @@ export class WebglCharAtlas implements IDisposable {
     // Draw underline
     if (underline) {
       this._tmpCtx.save();
-      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 10));
-      const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15));
+      // When the width is odd, draw at 0.5 position. Offset by an additional 1 dpr to bring the
+      // underline closer to the character
+      const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio;
       this._tmpCtx.lineWidth = lineWidth;
 
       // Underline color
@@ -508,18 +510,18 @@ export class WebglCharAtlas implements IDisposable {
           break;
         case UnderlineStyle.DOTTED:
           this._tmpCtx.setLineDash([window.devicePixelRatio * 2, window.devicePixelRatio]);
-          this._tmpCtx.moveTo(xLeft, yMid);
-          this._tmpCtx.lineTo(xRight, yMid);
+          this._tmpCtx.moveTo(xLeft, yTop);
+          this._tmpCtx.lineTo(xRight, yTop);
           break;
         case UnderlineStyle.DASHED:
           this._tmpCtx.setLineDash([window.devicePixelRatio * 4, window.devicePixelRatio * 3]);
-          this._tmpCtx.moveTo(xLeft, yMid);
-          this._tmpCtx.lineTo(xRight, yMid);
+          this._tmpCtx.moveTo(xLeft, yTop);
+          this._tmpCtx.lineTo(xRight, yTop);
           break;
         case UnderlineStyle.SINGLE:
         default:
-          this._tmpCtx.moveTo(xLeft, yMid);
-          this._tmpCtx.lineTo(xRight, yMid);
+          this._tmpCtx.moveTo(xLeft, yTop);
+          this._tmpCtx.lineTo(xRight, yTop);
           break;
       }
       this._tmpCtx.stroke();
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts
index df359dac..776ff701 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts
@@ -139,7 +139,7 @@ describe('DomRendererRowFactory', () => {
           lineData.setCell(0, cell);
           const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
-            '<span class="xterm-underline-1" style="text-decoration-color: rgb(255,255,255);">a</span>'
+            '<span class="xterm-underline-1">a</span>'
           );
         });
         it('should add class for double underline style', () => {
@@ -150,7 +150,7 @@ describe('DomRendererRowFactory', () => {
           lineData.setCell(0, cell);
           const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
-            '<span class="xterm-underline-2" style="text-decoration-color: rgb(255,255,255);">a</span>'
+            '<span class="xterm-underline-2">a</span>'
           );
         });
         it('should add class for curly underline style', () => {
@@ -161,7 +161,7 @@ describe('DomRendererRowFactory', () => {
           lineData.setCell(0, cell);
           const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
-            '<span class="xterm-underline-3" style="text-decoration-color: rgb(255,255,255);">a</span>'
+            '<span class="xterm-underline-3">a</span>'
           );
         });
         it('should add class for double dotted style', () => {
@@ -172,7 +172,7 @@ describe('DomRendererRowFactory', () => {
           lineData.setCell(0, cell);
           const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
-            '<span class="xterm-underline-4" style="text-decoration-color: rgb(255,255,255);">a</span>'
+            '<span class="xterm-underline-4">a</span>'
           );
         });
         it('should add class for dashed underline style', () => {
@@ -183,7 +183,7 @@ describe('DomRendererRowFactory', () => {
           lineData.setCell(0, cell);
           const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
-            '<span class="xterm-underline-5" style="text-decoration-color: rgb(255,255,255);">a</span>'
+            '<span class="xterm-underline-5">a</span>'
           );
         });
       });
diff --git a/src/common/buffer/AttributeData.ts b/src/common/buffer/AttributeData.ts
index 6878069a..b51f7ecb 100644
--- a/src/common/buffer/AttributeData.ts
+++ b/src/common/buffer/AttributeData.ts
@@ -149,7 +149,7 @@ export class ExtendedAttrs implements IExtendedAttrs {
 
   constructor(
     underlineStyle: UnderlineStyle = UnderlineStyle.NONE,
-    underlineColor: number = -1
+    underlineColor: number = Attributes.CM_DEFAULT
   ) {
     this.underlineStyle = underlineStyle;
     this.underlineColor = underlineColor;