# Popup border radius How

**URL:** <https://forum.inductiveautomation.com/t/popup-border-radius-how/79488>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 22, 2023, 1:15am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488 "2023-09-22T01:15:28Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 22, 2023, 1:15am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/1 "2023-09-22T01:15:28Z")

</div>

This is weird, I thought I had it.  
I set borderRadius in root.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52ad3a3a2d4210d4af71e0c88648192132805797.png)

Border radius setting does not do it.

How do you set border radius?

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 22, 2023, 4:01am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/2 "2023-09-22T04:01:00Z")

</div>

Added this in advance stylesheet:

```auto
.ia_popup{
    border-radius : 20px;
    border:none;
}

```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 22, 2023, 6:49am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/3 "2023-09-22T06:49:43Z")

</div>

> [@Eugene49](#):
>
> Added this in advance stylesheet:

And what happened?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 22, 2023, 8:01am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/4 "2023-09-22T08:01:06Z")

</div>

All his popups are now circles.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 22, 2023, 12:48pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/5 "2023-09-22T12:48:42Z")

</div>

Its a client requirement.  
Don't look at me..

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

They want triangular, also possible.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 22, 2023, 3:47pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/6 "2023-09-22T15:47:42Z")

</div>

I. Am. Vindicated.

In the earliest days of Perspective, I was trying to build projects and style them in ways I expected customers would, and one of the very first roadblocks I ran into was the Popups - which looked like they were more-or-less straight out of Java. At that time we didn't even have the theme files as we now know them, and so trying to get the Popups to look like anything more modern was a nightmare. I lobbied hard to provide user avenues for styling _everything_ without having to apply style classes to everything, with my primary example being that I wanted to provide a border radius to Popups so that I could make them look a bit more like the windows of my Mac. They were a prime example of shortcoming because we don't expose their style props.

While the theming update in 8.0.13(?) provided a huge boost, it was also sort of cumbersome when trying to tweak minor settings, and it is applied to everything on the Gateway. I continued lobbying with the same example, and eventually the advanced stylesheet was proffered as a way to quickly modify settings in a Project-based resource. Now here we are - with someone using the exact resource for the exact reason I used as an example. I'm so proud!

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 17, 2024, 8:56pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/7 "2024-09-17T20:56:19Z")

</div>

> [@cmallonee](#):
>
> eventually the advanced stylesheet was proffered as a way to quickly modify settings in a Project-based resource.

Instead of setting style on component's property in property editor.

I wanted the style to be standard and be inherited to all instance of a component.

Is there CSS property reference to lookup which css properties use by each component? So I can modify this via advance stylesheet?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 17, 2024, 9:44pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/8 "2024-09-17T21:44:11Z")

</div>

No, there's nothing like that. In order to determine which rule you should specify for the setting to be applied to, you'll need to get comfortable using the browser to inspect components.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 18, 2024, 7:12am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/9 "2024-09-18T07:12:50Z")

</div>

Press `F12` or `ctrl+shift+i` to make the dev tools appear.  
On the top left corner, you'll find this button:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba1ef06f8c18386376e74f145faad7aded322292.png)  
click it, then click an element on the page. This will unfold the DOM tree () and highlight the line that describes the element you clicked.  
Now this is just to get you in the right ballpark, you'll still have to explore a bit more in depth to find the exact element you want to style.

Let's take popups as an example. Let's say I want to change the style of the title bar and the close button.  
Let's open a popup, click the "select" button, then the title bar.  
I get a div with the class `popup-drag`. This is not exactly what I want, but at least I'm now in the popup.  
Looking at the other divs, I can spot one with the class `popup-header`. Sounds good.  
Hovering over an element in the tree will highlight it on the page, so I try with this one and it does highlight the title bar.  
Let's try adding a style for the classes of that element:

```css
.ia_popup .ia_popup__header {
	background-color: red;
	color: green;
	font-weight: 900;
	font-size: 2em;
}

```

And I get this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/3344d7483343de0efe33cc9d675b2f11c88308d1.png)

I got the right selector, now I can do whatever I want to that element.  
Let's find the close button, with the same process: select, click the button, adjust the selection.  
I get an svg element with the class `close-icon`. Looks good to me.

```css
.ia_popup > .close-icon {
	margin-top: -5px;
	margin-right: -5px;
	width: 26px;
	height: 26px;
	background-color: blue;
	color: white;
	transform: rotate(45deg);
}
.ia_popup > .close-icon:hover {
	color: orange;
}

```

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

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 18, 2024, 3:10pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/10 "2024-09-18T15:10:23Z")

</div>

Thank you for this..  
This helps me get head start..

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [June 16, 2025, 9:07am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/11 "2025-06-16T09:07:29Z")

</div>

Whats the style you used in stylesheet?

I tried below style:

```python
{
  "classes": "",
  "backgroundColor": "white",
  "overflow": "auto",
  "borderRadius": "8px",
  "boxShadow": "0px 4px 20px rgba(0, 0, 0, 0.2)",
  "padding": "10px"
}

```

but am still not getting rounded border in popup

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 16, 2025, 10:52am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/12 "2025-06-16T10:52:30Z")

</div>

You put that in the stylesheet ?  
That's not css, that's json.

Ask google about css syntax.

Also, include the selector you used, maybe it's wrong.

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [June 16, 2025, 11:07am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/13 "2025-06-16T11:07:14Z")

</div>

I applied the following style using a style sheet:

css

```python
.psc-popup {
  background-color: white;
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  padding: 10px;
}

```

I’ve tried applying this both through the style sheet and directly to the root component’s style, but it hasn’t taken effect.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 16, 2025, 1:38pm UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/14 "2025-06-16T13:38:38Z")

</div>

`psc-popup` tells me you're targeting an element on which you've put a class (psc = perspective style class).  
The thing is, you cannot put a class on the "actual" root of a popup. So you're bound to apply your rounded corners on something that's INSIDE the popup.

Look again at the examples I gave previously in this thread. They use `.ia_popup` to target the actual outermost element of the popup. You'll need to round its corners too.

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [June 17, 2025, 3:53am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/15 "2025-06-17T03:53:16Z")

</div>

Output:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/6328b034c14bb593f3d4c4518b2ffaa364ae4575.png)  
I applied the class on fcnt\_Main  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/80aee50d327cda7f06392088bd00eb432893778d.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 17, 2025, 5:35am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/16 "2025-06-17T05:35:11Z")

</div>

Yes, exactly as I said, you're rounding the corners of an inner container, not of the popup.  
Read this thread again.

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [June 17, 2025, 5:53am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/17 "2025-06-17T05:53:57Z")

</div>

Hey got it. Thanks!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 30, 2025, 11:11am UTC](https://forum.inductiveautomation.com/t/popup-border-radius-how/79488/18 "2025-06-30T11:11:13Z")

</div>

`.ia_popup:has(.psc-popup):` is also an option if its only some popups you want to target