---
title: pad
summary: null
url: https://www.fastly.com/documentation/reference/io/pad
---


Add pixels to the edge of an image.

## Syntax

```text
pad={all-sides}
pad={top-and-bottom},{left-and-right}
pad={top},{left-and-right},{bottom}
pad={top},{right},{bottom},{left}
```

## Sub-parameters

|Param|Units	|Description|
|-------|-----------|
| `top` | Pixels or Percentage | Amount to add to the top of the image. |
| `right` | Pixels or Percentage | Amount to add to the right side of the image. |
| `bottom` | Pixels or Percentage | Amount to add to the bottom of the image. |
| `left` | Pixels or Percentage | Amount to add to the left side of the image. |

## Notes

1. By default padding applies a background color of white. See [`bg-color`](/reference/io/bg-color) to change that.
1. If the source image contains a transparent background and the output image also contains transparency, the padding will be made up of transparent pixels.
1. When using `pad` and [`canvas`](/reference/io/canvas) at the same time, `pad` will be ignored.
1. Values can be specified using CSS style shorthand values. (see [CSS Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) or [CSS Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more examples).
1. CSS shorthand allows for all edges to be specified in one property.
1. Any fractional pixel measurements will be rounded to the nearest whole pixel.

## Examples

Click the links to view the transformed image using a demo Fastly IO service.

|Example usage|Description|
|-----------|-------------|
|[`?pad=25,50,75,100`](https://www.fastly.io/image.jpg?pad=25,50,75,100)|Pad top edge 25px, right edge 50px, bottom edge 75px and left edge 100px|
|[`?pad=25,50,75`](https://www.fastly.io/image.jpg?pad=25,50,75)|Pad top edge 25px, right and left edge 50px, bottom edge 75px|
|[`?pad=25,50`](https://www.fastly.io/image.jpg?pad=25,50)|Pad top and bottom edge 25px, right and left edge 50px|
|[`?pad=0.25`](https://www.fastly.io/image.jpg?pad=0.25)|Pad all edges by 25%|