# How to add border to switch node

**URL:** <https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637>\
**Category:** Dashboard\
**Tags:** switch-node\
**Created:** [24 October 2024 17:41 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637 "2024-10-24T17:41:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [24 October 2024 17:41 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/1 "2024-10-24T17:41:42Z")

</div>

I'm using a dashboard switch node with icon, but with no label so it can be 1x1 in size.  
Can I somehow get a border around the 1x1 square so that it would look like a button. A dashboard button has this grey shine around it and it is clear that it can be pressed.  
Using only an icon on switch node it is not clear that it can be pressed. It could also be just an information icon.  
Is there any way to get the same board as on buttons? Or any other kind of boarder? Or maybe have a grey background color on the 1x1 square?

I'm not using a button since a button does not have a state and outputs the same message whereas a switch node has a state.

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [17 November 2024 10:10 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/2 "2024-11-17T10:10:55Z")

</div>

Seems this is nothing that can be done easily

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 November 2024 10:40 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/3 "2024-11-17T10:40:45Z")

</div>

> [@NodyRed](#):
>
> this is nothing that can be done easily

Easy is subjective TBF. It is easy for anyone who knows about things like CSS and understands they can use a ui-template node to affect the style of anything on the page 😉

The reason no-one has offered an assist is possibly because your post slipped through the cracks but it doesnt help that you haven't told us which dashboard are you using (old/depreciated node-red-dashboard? or the new @flowfuse/node-red-dashboard AKA Dastboard-2)?

If you know about CSS and classes and the like, you can probably apply a style to target your button and adjust it to however you like.

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [17 November 2024 11:01 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/4 "2024-11-17T11:01:06Z")

</div>

Sorry, using dashboard 3.6.5. That should be the latest?  
I wouldn't know where to start but also do not want to mess around in the deep code due to probable interference with updating dashboard later on. If there is something out of node-red kind of would be preferred.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 November 2024 11:09 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/5 "2024-11-17T11:09:33Z")

</div>

> [@NodyRed](#):
>
> Sorry, using dashboard 3.6.5. That should be the latest?

Yeah, that is what we now refer to as Dashboard 1.0 (or original / depreciated)

You can add a CSS class name to the switch then use a template with styles to set the style of the button

#### Template node

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

#### toggle node

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/15dbe127f89aa8026d8f0b68be087087fc558edd.png)

#### ui-template styles for full border

```auto
<style>
    .slim-black-border {
        border: 1px solid black;
    }
</style>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4f3b4cc03a5864e319fe71b6b86a74473c84f90.png)

##### #### ui-template styles for just the toggle

```auto
<style>
    .slim-black-border md-switch {
        border: 1px solid black;
    }
</style>

```

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

* * *

If you want to dig deeper, read up on CSS

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [17 November 2024 11:34 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/6 "2024-11-17T11:34:00Z")

</div>

Great thanks I will check it out.

Did not know this is dashboard 1.0. Can I just upgrade to dashboard 2.0 by installing `@flowfuse/node-red-dashboard` ? I guess it will not update the dashboard 1.0 nodes?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 November 2024 11:38 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/7 "2024-11-17T11:38:30Z")

</div>

> **[Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/migration.html)**
>
> Easily migrate from Dashboard 1.0 to 2.0 with this comprehensive guide, ensuring a smooth transition for your projects.

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [17 November 2024 14:31 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/8 "2024-11-17T14:31:34Z")

</div>

I tried as you posted but somehow not getting it working. also tried to send a message to template just to be sure. What am I missing?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/384f2dc55360511c888ee37e29ef5d46ba5cb20f.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c6b65891af119823af25affcd6f369bff3bac8d4.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/682251ea3d242eb3c306eb67a127eafebdd702e3.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 November 2024 14:45 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/9 "2024-11-17T14:45:42Z")

</div>

Something might be overriding it - you might need to increase the specificity of the style entry.

Check in the dev tools of your browser (or just use the sledgehammer approach and add `!important` to the border)

```auto
    .slim-black-border {
        border: 1px solid black !important;
    }

```

_just don't do it often 😉_

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [17 November 2024 14:52 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/10 "2024-11-17T14:52:33Z")

</div>

I just restarted node-red and now the border appeared without doing anything. Thanks!

---

<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:** [18 November 2024 08:30 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/11 "2024-11-18T08:30:46Z")

</div>

Try adding `border-radius: 50px;` and see the difference !!

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [28 November 2024 18:46 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/12 "2024-11-28T18:46:06Z")

</div>

How would you do the same in dashboard 2?

---

<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:** [12 December 2024 18:46 UTC](https://discourse.nodered.org/t/how-to-add-border-to-switch-node/92637/13 "2024-12-12T18:46:41Z")

</div>

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