diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index fc61395bf9..0e0d5c68af 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -67,7 +67,7 @@ limitations under the License.
     margin-left: 8px;
 }
 
-.mx_RoomSubList_badge {
+.mx_RoomSubList_badge > div {
     flex: 0 0 auto;
     border-radius: 8px;
     font-weight: 600;
@@ -103,7 +103,7 @@ limitations under the License.
     }
 }
 
-.mx_RoomSubList_badgeHighlight {
+.mx_RoomSubList_badgeHighlight > div {
     color: $accent-fg-color;
     background-color: $warning-color;
 }
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index d218fdf1e8..bca6b8ad42 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -238,17 +238,22 @@ const RoomSubList = createReactClass({
                 'mx_RoomSubList_badge': true,
                 'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
             });
+            // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
             if (subListNotifCount > 0) {
                 badge = (
                     <AccessibleButton className={badgeClasses} onClick={this._onNotifBadgeClick} aria-label={_t("Jump to first unread room.")}>
-                        { FormattingUtils.formatCount(subListNotifCount) }
+                        <div>
+                            { FormattingUtils.formatCount(subListNotifCount) }
+                        </div>
                     </AccessibleButton>
                 );
             } else if (this.props.isInvite && this.props.list.length) {
                 // no notifications but highlight anyway because this is an invite badge
                 badge = (
                     <AccessibleButton className={badgeClasses} onClick={this._onInviteBadgeClick} aria-label={_t("Jump to first invite.")}>
-                        { this.props.list.length }
+                        <div>
+                            { this.props.list.length }
+                        </div>
                     </AccessibleButton>
                 );
             }