diff --git a/htdocs/css/map.css b/htdocs/css/map.css
index 6d09b70..5d478cd 100644
--- a/htdocs/css/map.css
+++ b/htdocs/css/map.css
@@ -46,6 +46,8 @@ ul {
     width: 30px;
     height: 20px;
     margin-right: 10px;
+    border-width: 2px;
+    border-style: solid;
 }
 
 .openwebrx-map-legend select {
diff --git a/htdocs/map.js b/htdocs/map.js
index 01672ef..83801f0 100644
--- a/htdocs/map.js
+++ b/htdocs/map.js
@@ -82,7 +82,7 @@
 
     var updateLegend = function() {
         var lis = $.map(colorKeys, function(value, key) {
-            return '<li class="square"><span class="illustration" style="background-color:' + value + ';"></span>' + key + '</li>';
+            return '<li class="square"><span class="illustration" style="background-color:' + chroma(value).alpha(fillOpacity) + ';border-color:' + chroma(value).alpha(strokeOpacity) + ';"></span>' + key + '</li>';
         });
         $(".openwebrx-map-legend .content").html('<ul>' + lis.join('') + '</ul>');
     }