Adding Borders with Locofy.ai in Figma
Learn how to add borders to elements.
How to Add Borders
-
Launch your project containing the elements you wish to add borders to.
-
Click on the element to which you want to assign a border.
![](/docs/add-borders/image-1.png)
- With the element selected, open the Locofy.ai plugin.
![](/docs/add-borders/image-2.png)
- In the Locofy.ai interface, select the option labeled Step 3: Edit styling & layout (opens in a new tab).
![](/docs/add-borders/image-3.png)
-
Scroll down to the stroke option. Remember, Locofy.ai supports only a single solid inside stroke at present. Once applied, your output will resemble the following:
![](/docs/add-borders/image-8.png)
Advanced CSS for Custom Borders
- For border customizations, proceed to "Advanced CSS properties".
- Input the desired property name and value to make custom borders beyond the typical inside stroke.
![](/docs/add-borders/image-6.png)
- Once advanced styles are applied, your output will have this appearance:
![](/docs/add-borders/image-7.png)