# Problem with border properties in table header with rotate(180deg)

**URL:** <https://forum.inductiveautomation.com/t/problem-with-border-properties-in-table-header-with-rotate-180deg/112095>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 11, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/problem-with-border-properties-in-table-header-with-rotate-180deg/112095 "2025-11-11T14:09:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [November 11, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/problem-with-border-properties-in-table-header-with-rotate-180deg/112095/1 "2025-11-11T14:09:17Z")

</div>

Good afternoon,

I have this problem with a perspective table and I have no idea how to solve it.

Under `columns.X.header.style` I have set this properties

```python
{
  "title": "My header",
  "justify": "center",
  "align": "center",
  "style": {
    "classes": "",
    "writingMode": "vertical-lr",
    "borderLeftColor": "#EE3333",
    "borderLeftStyle": "solid",
    "borderRightColor": "#2CD173",
    "borderRightStyle": "solid",
    "transform": "rotate(180deg)"
  }
}

```

The problem as you can see is the color positions in the header are not matching with the properties.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f916163652e9077395e993c6bf25e222a6645aa.png)

The same happen if I set the border properties under `columns.X.style`

In this case the header is wrong but the rows are correct.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9cb319feb864359e78f45fcb299db853576e88eb.png)

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [November 11, 2025, 3:08pm UTC](https://forum.inductiveautomation.com/t/problem-with-border-properties-in-table-header-with-rotate-180deg/112095/2 "2025-11-11T15:08:33Z")

</div>

I’ve just realized that the problem is the

`transform: rotate(180deg)`

I didn’t expecting this behavior since is the first time I use the vertical text.

Any idea about how could I make work the borders keeping the vertical text alive?

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [November 17, 2025, 6:18am UTC](https://forum.inductiveautomation.com/t/problem-with-border-properties-in-table-header-with-rotate-180deg/112095/3 "2025-11-17T06:18:13Z")

</div>

I am still doing some testing, trying to force the result I want by overwriting the 'wrong' borders this way: `borderLeftStyle: None`

In the designer preview, the result would work correctly, but when I save it to the browser, the column borders disappear, leaving only those of the headers.

This is in the designer:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4bdc13913957d250a75fb632b4bc3b175d32e2f4.png)

This is in the browser:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e6cc804c5be06677240c72f7dadd2b97e434829.png)