diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
index 5abd00213..c83e39c89 100644
--- a/app/assets/stylesheets/annotations.scss
+++ b/app/assets/stylesheets/annotations.scss
@@ -98,7 +98,7 @@
     &:checked + label {
       span {
         transform: scale(1.25);
-        border: 2px solid black;
+        border: 2px solid #0000008a;
       }
     }
   }
@@ -109,16 +109,19 @@
     height: 25px;
     margin-right: 2px;
     cursor: pointer;
+
     &:hover {
       span { 
         transform: scale(1.25); 
       }
     }
+
     span {
       display: block;
       width: 100%;
       height: 100%;
-      transition: transform .2s ease-in-out;
+      border-radius: 50%;
+      transition: transform .1s ease-in-out;
     }
   }
 }
diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb
index d53b3e434..b79ec63e1 100644
--- a/app/views/annotations/_form.html.erb
+++ b/app/views/annotations/_form.html.erb
@@ -46,7 +46,7 @@
         <%= f.label :color,
                     "annotation_color#{i}",
                     for: "annotation_color#{i}" do %>
-            <span class="annotation_color<%=i%>",
+            <span class="annotation_color<%=i%>"
                   style="background: <%= colors[i] %>;"></span>
           <% end %>
       <% end %>