1. disapper black border in card 2.

src/components/MultiRingCircularProgress.tsx

@@ -36,11 +36,16 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
   };
 
   return (
-    <div 
-      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer"
+    <div
+      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer outline-none focus:outline-none focus:ring-0 focus:border-none"
       onMouseLeave={() => onHover(null)}
+      onClick={() => {
+        console.log("hoveredIndex ");
+      }}
+      style={{ outline: "none", border: "none" }}
+      tabIndex={-1}
     >
-      <PieChart width={400} height={400}>
+      <PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
         {ringData.map((ring, index) => (
           <Pie
             key={index}
@@ -59,6 +64,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
             onMouseEnter={() => onHover(index)}
             onMouseLeave={() => onHover(null)}
             fill={getHoverColor(ring, index)}
+            // pointerEvents={'none'}
           >
             <Cell
               fill={getHoverColor(ring, index)}