From e616f1bf4e1ac65082b23ee8fe3128625eb650c1 Mon Sep 17 00:00:00 2001
From: "Julia.Radzhabova" <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 17 Jun 2025 21:11:10 +0300
Subject: [PATCH] Fix border color component

---
 .../main/resources/less/toolbar.less               | 14 ++++++++++----
 .../main/resources/less/toolbar.less               | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 2029775206..3d281ca2dd 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -253,15 +253,21 @@
 #id-toolbar-mnu-item-border-color {
     > span {
         background-image: none;
-        width: 12px;
-        height: 12px;
-        margin: 2px 8px 0 -20px;
+        width: calc(@x-small-btn-size-ie/2 + 3px);
+        height: calc(@x-small-btn-size-ie/2 + 3px);
+        width: calc(@x-small-btn-size/2 + 3px);
+        height: calc(@x-small-btn-size/2 + 3px);
+        margin: 1px 6px 0 calc(-1 * @x-small-btn-size-ie);
+        margin: 1px 6px 0 calc(-1 * @x-small-btn-size);
         border-style: solid;
         border-width: 3px;
         border-color: #000;
+        border-radius: @border-radius-dataview-item-ie;
+        border-radius: @border-radius-dataview-item;
 
         .rtl & {
-            margin: 2px -20px 0 8px;
+            margin: 1px calc(-1 * @x-small-btn-size-ie) 0 6px;
+            margin: 1px calc(-1 * @x-small-btn-size) 0 6px;
         }
     }
 }
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 655b1d8ed4..7e1f518e0d 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -275,15 +275,21 @@
 #id-toolbar-mnu-item-border-color {
     > span {
         background-image: none;
-        width: 12px;
-        height: 12px;
-        margin: 2px 8px 0 -20px;
+        width: calc(@x-small-btn-size-ie/2 + 3px);
+        height: calc(@x-small-btn-size-ie/2 + 3px);
+        width: calc(@x-small-btn-size/2 + 3px);
+        height: calc(@x-small-btn-size/2 + 3px);
+        margin: 1px 6px 0 calc(-1 * @x-small-btn-size-ie);
+        margin: 1px 6px 0 calc(-1 * @x-small-btn-size);
         border-style: solid;
         border-width: 3px;
         border-color: #000;
+        border-radius: @border-radius-dataview-item-ie;
+        border-radius: @border-radius-dataview-item;
 
         .rtl & {
-            margin: 2px -20px 0 8px;
+            margin: 1px calc(-1 * @x-small-btn-size-ie) 0 6px;
+            margin: 1px calc(-1 * @x-small-btn-size) 0 6px;
         }
     }
 }