pad

Add pixels to the edge of an image.

Syntax

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

Sub-parameters

ParamUnits
topPixels or Percentage
rightPixels or Percentage
bottomPixels or Percentage
leftPixels or Percentage

Notes

  1. By default padding applies a background color of white. See 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 at the same time, pad will be ignored.
  4. Values can be specified using CSS style shorthand values. (see CSS Margin or 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 usageDescription
?pad=25,50,75,100Pad top edge 25px, right edge 50px, bottom edge 75px and left edge 100px
?pad=25,50,75Pad top edge 25px, right and left edge 50px, bottom edge 75px
?pad=25,50Pad top and bottom edge 25px, right and left edge 50px
?pad=0.25Pad all edges by 25%

User contributed notes

BETA

Do you see an error in this page? Do you have an interesting use case, example or edge case people should know about? Share your knowledge and help people who are reading this page! (Comments are moderated; for support, please contact Fastly support)