diff --git a/models/avatars/avatar.go b/models/avatars/avatar.go
index 9c56e0f9a0..04e12f3e90 100644
--- a/models/avatars/avatar.go
+++ b/models/avatars/avatar.go
@@ -24,7 +24,7 @@ import (
 
 const (
 	// DefaultAvatarClass is the default class of a rendered avatar
-	DefaultAvatarClass = "ui avatar tw-align-middle"
+	DefaultAvatarClass = "ui avatar border tw-align-middle"
 	// DefaultAvatarPixelSize is the default size in pixels of a rendered avatar
 	DefaultAvatarPixelSize = 28
 )
diff --git a/web_src/css/base.css b/web_src/css/base.css
index b5a39c7af6..a25f985807 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -462,6 +462,7 @@ img.ui.avatar,
 .ui.avatar img,
 .ui.avatar svg {
   border-radius: var(--border-radius);
+  border-color: var(--color-secondary);
   object-fit: contain;
   aspect-ratio: 1;
 }