Fix the rendering of the different separators we've in the UI

Currently, the css for a separator is something like { height: 1px; background-color: ... }.
But its rendering depends on its position on the screen.
So instead of setting the height to 1px, we just set something like { border-top: 1px solid ...; },
this way the final rendering is exactly the same for all the separators.

web/annotation_editor_layer_builder.css

@@ -309,11 +309,12 @@
       height: 100%;
 
       .divider {
-        width: 1px;
+        width: 0;
         height: calc(
           2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
         );
-        background-color: var(--editor-toolbar-border-color);
+        border-top: 1px solid var(--editor-toolbar-border-color);
+        border-bottom: none;
         display: inline-block;
         margin-inline: 2px;
       }

web/dialog.css

@@ -140,9 +140,10 @@
 
     .dialogSeparator {
       width: 100%;
-      height: 1px;
+      height: 0;
       margin-block: 4px;
-      background-color: var(--separator-color);
+      border-top: 1px solid var(--separator-color);
+      border-bottom: none;
     }
 
     .dialogButtonsGroup {

web/viewer-geckoview.css

@@ -272,9 +272,10 @@ dialog .toolbarField {
 dialog .separator {
   display: block;
   margin: 4px 0;
-  height: 1px;
+  height: 0;
   width: 100%;
-  background-color: var(--separator-color);
+  border-top: 1px solid var(--separator-color);
+  border-bottom: 0;
 }
 
 dialog .buttonRow {

web/viewer.css

@@ -662,9 +662,10 @@ body {
 .splitToolbarButtonSeparator {
   float: var(--inline-start);
   margin: 4px 0;
-  width: 1px;
+  width: 0;
   height: 20px;
-  background-color: var(--separator-color);
+  border-left: 1px solid var(--separator-color);
+  border-right: none;
 }
 
 .toolbarButton,
@@ -870,16 +871,18 @@ body {
 .verticalToolbarSeparator {
   display: block;
   margin: 5px 2px;
-  width: 1px;
+  width: 0;
   height: 22px;
-  background-color: var(--separator-color);
+  border-left: 1px solid var(--separator-color);
+  border-right: none;
 }
 .horizontalToolbarSeparator {
   display: block;
   margin: 6px 0;
-  height: 1px;
+  border-top: 1px solid var(--doorhanger-separator-color);
+  border-bottom: none;
+  height: 0;
   width: 100%;
-  background-color: var(--doorhanger-separator-color);
 }
 
 .toolbarField {
@@ -1153,9 +1156,10 @@ dialog .toolbarField {
 dialog .separator {
   display: block;
   margin: 4px 0;
-  height: 1px;
+  height: 0;
   width: 100%;
-  background-color: var(--separator-color);
+  border-top: 1px solid var(--separator-color);
+  border-bottom: none;
 }
 
 dialog .buttonRow {