A border helps an image stand out from its background or match your brand style. In the Abyssale Design Editor, you can add a colored frame around any image layer and control its width and color.

Key limitations

Border is a setting of Image layers. Select an image layer to see it in the side panel.

How to add a border

Follow these steps to add a border to your image:

Select your Image layer: In the design editor, click on the image layer you wish to modify.
Locate the Border toggle: In the right-hand panel, open the Styles section and find Border, between Mask and Blur.
Enable the effect: Click the toggle switch to turn the border on.
Set the width: Use the Width slider or type a value in the field. The default is 1.
Pick a color: Use the Color picker. The default is #000000 (black).

Settings

Setting	What it does	Default
Width	Thickness of the frame. Use the slider or type a value.	1
Color	Color of the frame, chosen with the color picker.	`#000000`

Where the border is drawn

The frame is drawn outside the image box. It does not cover any part of your picture. If the layer has a Mask, the border follows the shape of the mask, so a round mask gets a round border.

Tips

Tip: Use your brand color for the border so every generated image stays on brand.

Tip: A thin border (1 to 3) gives a clean frame. A thicker one gives a bold, graphic look.

Tip: Combine a border with a mask to make round avatars with a colored ring. For rounded corners, apply a Rounded Corners mask and set its Radius: the border follows the mask.

Troubleshooting

If you don't see the Border option in the side panel, double-check that you have selected an Image layer.

Using the API

You can set the border programmatically:

At generation: set stroke_width and stroke_color on an image element.
In design import: set stroke on an image layer, as { "color": "#000000", "width": 1 }. The same property is exported when you get a design as an import.

Add a border to image layers