diff --git a/src/components/ha-hs-color-picker.ts b/src/components/ha-hs-color-picker.ts
index ad739818df..1533e2b6c4 100644
--- a/src/components/ha-hs-color-picker.ts
+++ b/src/components/ha-hs-color-picker.ts
@@ -373,17 +373,19 @@ class HaHsColorPicker extends LitElement {
     return css`
       :host {
         display: block;
+        outline: none;
       }
       .container {
         position: relative;
         width: 100%;
         height: 100%;
-        cursor: pointer;
         display: flex;
       }
       canvas {
         width: 100%;
         height: 100%;
+        border-radius: 50%;
+        cursor: pointer;
       }
       svg {
         position: absolute;
diff --git a/src/components/ha-temp-color-picker.ts b/src/components/ha-temp-color-picker.ts
index 16422f55bd..9070a46e28 100644
--- a/src/components/ha-temp-color-picker.ts
+++ b/src/components/ha-temp-color-picker.ts
@@ -381,21 +381,22 @@ class HaTempColorPicker extends LitElement {
       :host {
         display: block;
         outline: none;
-        border-radius: 9999px;
-      }
-      :host(:focus-visible) {
-        box-shadow: 0 0 0 2px rgb(255, 160, 0);
       }
       .container {
         position: relative;
         width: 100%;
         height: 100%;
-        cursor: pointer;
         display: flex;
       }
       canvas {
         width: 100%;
         height: 100%;
+        border-radius: 50%;
+        transition: box-shadow 180ms ease-in-out;
+        cursor: pointer;
+      }
+      :host(:focus-visible) canvas {
+        box-shadow: 0 0 0 2px rgb(255, 160, 0);
       }
       svg {
         position: absolute;