# Perspective Tables with round edges

**URL:** <https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2022, 3:39pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433 "2022-12-09T15:39:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hans\_Olav\_Ronning](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hans_olav_ronning/32/44018_2.png) [@Hans\_Olav\_Ronning](https://forum.inductiveautomation.com/u/Hans_Olav_Ronning)\
**Post date:** [December 9, 2022, 3:39pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/1 "2022-12-09T15:39:59Z")

</div>

Hello guys!

I have trouble figuring out to create round edges on my newly created tables. I've been experimenting with all Style objects in the table properties, but it seems like one set of Style is not available. I wonder if anyone has any clues on how to round all edges on these objects? Please see attached image for reference.

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

---

<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:** [December 9, 2022, 4:19pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/2 "2022-12-09T16:19:59Z")

</div>

![Table border radius](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/b/ebb1b5918023703b4564a059dd8baf61e3213955.png)

The padding is required to prevent the header row spilling out over the radius and hiding it. You could probably avoid that by applying a radius to the header and footor or rows of your table.

Note that there is a separate `props.rows.style` section for styling that and others for header and footer where similar rules could be applied.

Best practice, as nearly always, is to define these in a Perspective Style class so that that class can be consistently applied across your application and a global edits made very simply when required.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [December 9, 2022, 6:17pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/3 "2022-12-09T18:17:12Z")

</div>

As you noticed, if you apply the `border-radius` declaration to the Table's `props.style` property, you still won't get fully rounded edges.

The CSS class that you're looking for is

```css
.table-container {
    border-radius: 4px;
}

```

You would need to either "inject" this CSS, add it as a custom CSS file ~~property (don't know why I said property)~~, or as of v22, add a Style resource.

Here is an example of what this looks like:

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

---

<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:** [December 9, 2022, 9:03pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/4 "2022-12-09T21:03:16Z")

</div>

> [@YF129701](#):
>
> ... you still won't get fully rounded edges.

Um, mine are rounder than yours. Can you elaborate?

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [December 9, 2022, 9:20pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/5 "2022-12-09T21:20:18Z")

</div>

I wasn't referring to how round they are. Here is a default table with no radius:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/6/a6783f30c91afd5e217fa1eed64f52df989f4f73.png)

Here is a table with `props.style.border-radius` set to `10px`:

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

You can clearly see that the rounding isn't working fully because of how the Table component is nested within containers. What I was suggesting was not to use the extra padding and just do what I posted above:

```css
.table-container {
    border-radius: 10px;
}

```

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

Not a huge deal, but if you have OCD like I probably do, little details like this keep me up at night 🤒

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 9, 2022, 10:44pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/6 "2022-12-09T22:44:07Z")

</div>

This is good to know 🙂

---

<div class="post-metadata">

**Author:** ![Hans\_Olav\_Ronning](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hans_olav_ronning/32/44018_2.png) [@Hans\_Olav\_Ronning](https://forum.inductiveautomation.com/u/Hans_Olav_Ronning)\
**Post date:** [December 13, 2022, 6:56am UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/7 "2022-12-13T06:56:53Z")

</div>

Appreciate it! Now its no longer a table only my mother could love 🤩

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [December 13, 2022, 3:30pm UTC](https://forum.inductiveautomation.com/t/perspective-tables-with-round-edges/67433/8 "2022-12-13T15:30:25Z")

</div>

You can do this without modifying any back-end styles.

Add "overflow:hidden" and it will crop the table to the outer dimensions.

I would actually do this in a style class but didn't in this example. I used the wizard so it created a property for each corner. I just clicked the checkbox for "all corners" and it made all these properties.

I merged 2 screenshots together so you could see the style properties I used and what it looks like without the designer's object selector handles.

 ![Rounded Table Borders](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/5752bd0d8e0900d5e2be8caef23671a3c4c8e313.png)