diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
index 2ffc8e70..55c2c71d 100644
--- a/src/modules/browse/components/ShelfBrowseCarousel/index.js
+++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -114,7 +114,7 @@ const ShelfBrowseCarousel = ({ callNumber, items, uid }) => {
               <li key={index} className={`shelf-browse-item ${(isCurrentItem || firstOrLastItem) ? 'shelf-browse-item-current' : ''} ${animationClass}`}>
                 <Anchor
                   {...anchorAttributes}
-                  className={`underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}
+                  className={`focus underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}
                 >
                   <dl className='flex'>
                     {isCurrentItem && <p className='margin__none this-item'>Current Record</p>}
diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css
index 1c4db8d9..56aa0114 100644
--- a/src/stylesheets/utilities.css
+++ b/src/stylesheets/utilities.css
@@ -50,3 +50,9 @@ a[class$="-checkbox"] > svg {
 a.active-checkbox > svg {
   color: var(--search-color-blue-400);
 }
+
+.focus:focus {
+  border-radius: 2px;
+  box-shadow: var(--ds-color-maize-400) 0px 0px 0px 2px, var(--ds-color-blue-400) 0px 0px 0px 3px;
+  outline: 0;
+}