# Rectangle dimensions

**URL:** <https://forum.inductiveautomation.com/t/rectangle-dimensions/99055>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [November 25, 2024, 8:20am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055 "2024-11-25T08:20:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\
**Post date:** [November 25, 2024, 8:20am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055/1 "2024-11-25T08:20:23Z")

</div>

When I place in Vision a rectangle on the screen with the dimension 100x100 pixels and with a stroke width of 20 pixels, the outer dimensions of this rectangle will be aprox. 120x120 pixels.  
Is it possible to draw a rectangle with the outer dimisions as width and height properties?

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [November 25, 2024, 8:43am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055/2 "2024-11-25T08:43:25Z")

</div>

Hello!  
You may try:

```python
.rectangle {
    width: 200px;
    height: 100px;
    background-color: white;
    border: 5px solid black; /* Stroke */
    box-sizing: border-box; 
}

```

that css property should be boxSizing in ignition.

---

<div class="post-metadata">

**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\
**Post date:** [November 25, 2024, 8:47am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055/3 "2024-11-25T08:47:14Z")

</div>

Does this also works in Vision?

---

<div class="post-metadata">

**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\
**Post date:** [November 25, 2024, 9:09am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055/5 "2024-11-25T09:09:50Z")

</div>

Sorry, I'm not a vision expert but pretty sure Vision doesn't support CSS styling....

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [November 25, 2024, 10:35am UTC](https://forum.inductiveautomation.com/t/rectangle-dimensions/99055/6 "2024-11-25T10:35:24Z")

</div>

> [@Henk](#):
>
> rectangle will be aprox. 120x120 pixels.

I was not aware of this, but Vision shapes use relWidth and relHeight properties that are bindable, so I imagine that custom properties could be added for the desired width and height, and an expression could translate those dimensions to the relative properties in a way that takes the stroke into account.