# Button-Group -Dark Theme -Separator Lines

**URL:** <https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603>\
**Category:** Dashboard\
**Tags:** dashboard-2, button-group, dark-theme\
**Created:** [14 January 2025 05:46 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603 "2025-01-14T05:46:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 January 2025 05:46 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603/1 "2025-01-14T05:46:10Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8c7c159acfa0eb40a44c7cda9d9436d90ea83cca.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/8773f7e5f0c96b05c23627570a8fe73caa36544a.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8ef900b3e48aca58aa585d4bc02693282023f020.png)

Button Group in dark theme, the separator lines are almost invisible.  
which CSS selector will change it to say white lines ? i am currently making group background slightly grey so that i can see the lines, i want to make the group background completely black like the last pic.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2025 07:05 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603/2 "2025-01-14T07:05:00Z")

</div>

To affect all occurrences:

```auto
.nrdb-ui-button-group-wrapper .v-btn-group {   
    border-color: rgb(255 255 255 / 30%);   
}
.v-btn-group--divided .v-btn:not(:last-child) {
    border-inline-end-color:rgb(255 255 255 / 30%);
}

```

Pure white will be a bit too much Id say... reduced the opacity

You can target it for specific widget ot per page or how ever it is needed.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 January 2025 07:22 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603/3 "2025-01-14T07:22:21Z")

</div>

Perfect!

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18630558c18b162102209e0b06919bac07c4a1b8.png)

I was able to change the entire border color initially but border-inline-end-color is what i was looking for I think...

EDIT:

any possibility of having a horizontal line when the group is occupying two lines for lack of space ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b9561a5e71bf95b0610728d5047aad4714929fc6.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2025 07:36 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603/4 "2025-01-14T07:36:46Z")

</div>

No if rounded corners turned on. For rectangular sort of can be done..

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 January 2025 07:36 UTC](https://discourse.nodered.org/t/button-group-dark-theme-separator-lines/94603/5 "2025-01-28T07:36:51Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.