---
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`](https://www.fastly.com/documentation/reference/io/bg-color) to change that.
2. If the source image contains a transparent background and the output image also contains transparency, the padding will be made up of transparent pixels.
3. When using `pad` and [`canvas`](https://www.fastly.com/documentation/reference/io/canvas) at the same time, `pad` will be ignored.
4. 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).
5. CSS shorthand allows for all edges to be specified in one property.
6. 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%                                                     |