> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convertly.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas, trim & masks

> Padding, borders, rounded corners, transparent trim, and alpha masks for finished UI assets.

Use these transforms when the CDN URL needs to produce finished UI assets, not just resized photos.

<Frame caption="Padding, border, and radius — `?pad=32&border=8&borderColor=%239100ff&radius=36`.">
  <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/canvas-pad-radius.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Image with padding, border, and rounded corners" className="w-full rounded-xl" />
</Frame>

<Columns cols={2}>
  <Frame caption="Logo before `?trim=1`.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/trim-before.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Logo before trim=1" className="w-full rounded-xl" />
  </Frame>

  <Frame caption="Logo after `?trim=1` — transparent borders cropped.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/trim-after.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Logo after trim=1" className="w-full rounded-xl" />
  </Frame>
</Columns>

<Frame caption="Alpha mask — `?w=960&h=540&fit=cover&mask={logoFileId}&maskBg=%23f8f3ff` (mask scaled with aspect ratio preserved).">
  <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/mask-logo.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Hero photo visible through a padded logo silhouette" className="w-full rounded-xl" />
</Frame>

## Canvas presentation

| Param            | Value                                        | Default     |
| ---------------- | -------------------------------------------- | ----------- |
| `pad`            | Equal padding around the image (`0`-`1000`). | `0`         |
| `border`         | Equal border (`0`-`400`).                    | `0`         |
| `borderColor`    | Hex border colour with optional alpha.       | `#000000`   |
| `radius` (`r`)   | Rounded-corner radius in pixels.             | `0`         |
| `bg`             | Hex background for rotation/padding.         | transparent |
| `rotate` (`rot`) | Rotate by degrees (`-360` to `360`).         | `0`         |
| `flip` / `flop`  | Vertical / horizontal mirror.                | `false`     |

```
?w=900&pad=32&bg=%23f8f3ff&border=8&borderColor=%239100ff&radius=36
?w=900&rotate=6&bg=%23ffffff
```

## Trim transparent borders

PNG, WebP, and other alpha images often ship with extra transparent padding. Pass `trim=1` to crop away fully transparent pixels before resize and encode:

```
https://cdn.convertly.sh/{endpointNamespace}/{fileIdOrSlug}?trim=1&w=400&format=webp
```

Aliases: `trimAlpha=1`, `trim-alpha=1`. Trim runs after EXIF auto-orient and before smart crop / resize.

## Alpha masks

Apply a mask from a stored file ID or HTTPS URL. The mask is scaled to fit inside the output canvas (aspect ratio preserved, centred). Transparent mask areas reveal `maskBg`:

```
?w=900&mask=<file-or-url>&maskBg=%23ffffff00
```

For overlaying a second image (logo mark on photo), use [Watermarks](/docs/image-cdn/transforms/watermarks) instead.