add border to control button

docs/components/animated-image.md

@@ -91,6 +91,7 @@ You can change the appearance and location of the control box by targeting the `
     bottom: 1rem;
     left: 1rem;
     background-color: deeppink;
+    border: none;
     color: white;
   }
 </style>

src/components/animated-image/animated-image.styles.ts

@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --control-box-size: 2.5rem;
+    --control-box-size: 3rem;
     --icon-size: calc(var(--control-box-size) * 0.625);
     display: inline-flex;
     position: relative;
@@ -33,7 +33,7 @@ export default css`
     height: var(--control-box-size);
     font-size: var(--icon-size);
     background: none;
-    border: none;
+    border: solid 2px currentColor;
     background-color: rgb(var(--sl-color-neutral-1000) / 50%);
     border-radius: var(--sl-border-radius-circle);
     color: rgb(var(--sl-color-neutral-0));