# Changing border color

**URL:** <https://discourse.nodered.org/t/changing-border-color/87184>\
**Category:** Dashboard\
**Created:** [12 April 2024 08:19 UTC](https://discourse.nodered.org/t/changing-border-color/87184 "2024-04-12T08:19:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [12 April 2024 08:19 UTC](https://discourse.nodered.org/t/changing-border-color/87184/1 "2024-04-12T08:19:30Z")

</div>

![juy](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76a9a9aa0b187a45ca0a016ff0bc68fec7395d73.png)  
hello everyone  
i want the leds appear in rectangle so i want to change the width and color of border of node led , i want to diverse the ship image in zones so every zone in a rectangle which appear the led  
can anyone tell me how and thank you all

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [12 April 2024 08:28 UTC](https://discourse.nodered.org/t/changing-border-color/87184/2 "2024-04-12T08:28:58Z")

</div>

You may need to post the code for people to help you.

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [12 April 2024 15:23 UTC](https://discourse.nodered.org/t/changing-border-color/87184/3 "2024-04-12T15:23:18Z")

</div>

i don't have code all i have node template where i change border radius to have format of ship and i put leds  
NB: the ship is not a picture its a groupe and i change the border radius

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [12 April 2024 17:52 UTC](https://discourse.nodered.org/t/changing-border-color/87184/4 "2024-04-12T17:52:58Z")

</div>

> [@Youssef](#):
>
> i have node template where i change border radius

You must be using CSS to specify the border radius and background colour.  
Have you tried setting a border width and colour?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7fb7a7c7482d943eab8033b860af7dd4ced0cef8.png)

```auto
[{"id":"bd582e90e6c0d4ca","type":"ui_template","z":"d0d88bf8148b7bd4","group":"5c86b4676297d59f","name":"Shipshape","order":4,"width":9,"height":"2","format":"<div class=\"outer\">\n <div class=\"inner\">\n <span>{{(payload)}}</span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":220,"wires":[[]]},{"id":"9179033a678c6abd","type":"ui_template","z":"d0d88bf8148b7bd4","group":"5c86b4676297d59f","name":"CSS","order":3,"width":1,"height":1,"format":"<style>\n.outer{\n position: relative;\n height: calc(100% - 1px);\n width: calc(100% - 1px);\n background-color: rgba(0,0,0,0%);\n \n}\n.inner {\nposition: absolute;\ntop: 0px;\nleft: 0px;\nwidth: 100%;\nheight: 100%;\nbackground-color: #22ccff;\nbox-sizing: border-box;\nborder:4px solid #cc00ff;\nborder-radius: 7% 50% 50% 7%;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":180,"wires":[[]]},{"id":"5c86b4676297d59f","type":"ui_group","name":"Demo","tab":"95debd9385aaaef6","order":1,"disp":false,"width":"20","collapse":false,"className":""},{"id":"95debd9385aaaef6","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

ps I think I would choose to use SVG for a dashboard widget like this. Take a look at some of the examples in the forum.

---

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [14 April 2024 21:26 UTC](https://discourse.nodered.org/t/changing-border-color/87184/5 "2024-04-14T21:26:46Z")

</div>

thank youu 😃

---

<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 April 2024 21:27 UTC](https://discourse.nodered.org/t/changing-border-color/87184/6 "2024-04-28T21:27:05Z")

</div>

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