fix: border radius on safari for carousel (#5274)

* fix: borders

* chore: potential fix

* chore: add bg to wrapper to avoid transparent lines

* simplify implementation

* chore: simplify code

* chore: add animations

src/nft/components/explore/CarouselCard.tsx

@@ -13,15 +13,43 @@ const CarouselCardContainer = styled.div`
   flex-direction: column;
   gap: 20px;
   background-color: ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   border-radius: 20px;
-  outline: 1px solid ${({ theme }) => theme.backgroundOutline};
+  overflow: hidden;
+  height: 100%;
+`
+const CarouselCardBorder = styled.div`
   width: 100%;
+  position: relative;
+  border-radius: 22px;
   cursor: pointer;
-  overflow: hidden;
+  border: 2px solid transparent;
+  transition-property: border-color;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  transition-timing: ${({ theme }) => theme.transition.timing.inOut};
 
   :hover {
-    outline: 3px solid ${({ theme }) => theme.backgroundOutline};
+    border: 2px solid ${({ theme }) => theme.backgroundOutline};
+  }
+
+  ::after {
+    content: '';
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 22px;
+    z-index: -1;
     box-shadow: ${({ theme }) => theme.deepShadow};
+    transition-property: opacity;
+    transition-duration: ${({ theme }) => theme.transition.duration.fast};
+    transition-timing: ${({ theme }) => theme.transition.timing.inOut};
+  }
+
+  :hover::after {
+    opacity: 1;
   }
 `
 
@@ -198,6 +226,7 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
   const gqlCollection = useCollectionQuery(collection.address)
 
   return (
+    <CarouselCardBorder>
       <CarouselCardContainer onClick={onClick}>
         <CarouselCardHeader collection={collection} />
         <CardBottomContainer>
@@ -224,6 +253,7 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
           </>
         </CardBottomContainer>
       </CarouselCardContainer>
+    </CarouselCardBorder>
   )
 }
 
@@ -265,6 +295,7 @@ const CarouselCardHeader = ({ collection }: { collection: TrendingCollection })
 
 export const LoadingCarouselCard = ({ collection }: { collection?: TrendingCollection }) => {
   return (
+    <CarouselCardBorder>
       <CarouselCardContainer>
         {collection ? (
           <CarouselCardHeader collection={collection} />
@@ -281,5 +312,6 @@ export const LoadingCarouselCard = ({ collection }: { collection?: TrendingColle
           <LoadingTable />
         </CardBottomContainer>
       </CarouselCardContainer>
+    </CarouselCardBorder>
   )
 }