diff --git a/src/vs/editor/contrib/suggest/browser/media/suggest.css b/src/vs/editor/contrib/suggest/browser/media/suggest.css
index fd183518cc8d0eb0cddcf6728f67ae4c9102fecd..b17aac149b5b64626fca0152c3d31fe48119981d 100644
--- a/src/vs/editor/contrib/suggest/browser/media/suggest.css
+++ b/src/vs/editor/contrib/suggest/browser/media/suggest.css
@@ -9,11 +9,23 @@
 	width: 660px;
 }
 
-.monaco-editor .suggest-widget.docs-expanded > .tree,
-.monaco-editor .suggest-widget > .details {
+.monaco-editor .suggest-widget.docs-expanded > .tree {
 	width: 330px;
 }
 
+.monaco-editor .suggest-widget > .details {
+	/* .details does not use border-box, so subtract the border height here (2px). This is the case
+	because the height of .details is set prorammatically based on .header and .docs, we don't want
+	our JS to care about the size of the border (which changes based on theme type). */
+	width: 328px;
+}
+
+.monaco-editor .suggest-widget > .details,
+.monaco-editor .suggest-widget > .tree {
+	border-style: solid;
+	border-width: 1px;
+}
+
 .monaco-editor .suggest-widget.small,
 .monaco-editor .suggest-widget > .tree,
 .monaco-editor .suggest-widget.small.docs-expanded > .tree,
@@ -30,6 +42,8 @@
 
 .monaco-editor .suggest-widget > .message {
 	padding-left: 22px;
+	border-style: solid;
+	border-width: 1px;
 }
 
 .monaco-editor .suggest-widget > .tree {
@@ -171,7 +185,6 @@
 	display: flex;
 	flex-direction: column;
 	cursor: default;
-	box-sizing: border-box;
 }
 
 .monaco-editor .suggest-widget .details.no-docs {
@@ -223,6 +236,17 @@
 
 /* High Contrast Theming */
 
+
+.monaco-editor.hc-black .suggest-widget > .tree,
+.monaco-editor.hc-black .suggest-widget > .message {
+	border-width: 2px;
+}
+
+.monaco-editor.hc-black .suggest-widget > .details {
+	border-width: 2px;
+	width: 326px;
+}
+
 .monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .icon,
 .monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .icon { background-image: url('Misc_inverse_16x.svg'); }
 
diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts
index 3fc14e54264c3442786f8369791447b6ae3ec63d..13e3ecb3b547c976d465b8a29f1f4fc71f5ad106 100644
--- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts
+++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts
@@ -243,7 +243,7 @@ class SuggestionDetails {
 		this.type.innerText = item.suggestion.detail || '';
 		this.docs.textContent = item.suggestion.documentation;
 
-		this.el.style.height = this.type.clientHeight + this.docs.clientHeight + 8 + 'px';
+		this.el.style.height = this.header.offsetHeight + this.docs.offsetHeight + 'px';
 
 		this.close.onmousedown = e => {
 			e.preventDefault();
@@ -488,10 +488,9 @@ export class SuggestWidget implements IContentWidget, IDelegate<ICompletionItem>
 		}
 		let borderColor = theme.getColor(editorSuggestWidgetBorder);
 		if (borderColor) {
-			let borderWidth = theme.type === 'hc' ? 2 : 1;
-			this.listElement.style.border = `${borderWidth}px solid ${borderColor}`;
-			this.details.element.style.border = `${borderWidth}px solid ${borderColor}`;
-			this.messageElement.style.border = `${borderWidth}px solid ${borderColor}`;
+			this.listElement.style.borderColor = borderColor.toString();
+			this.details.element.style.borderColor = borderColor.toString();
+			this.messageElement.style.borderColor = borderColor.toString();
 		}
 	}