GIF Border and Frame

What GIF Border and Frame does

GIF Border and Frame puts an animated GIF inside a border or a styled frame: a solid or gradient border with rounded corners, a polaroid with a caption, a strip of film, a phone, or a browser window. Every frame of the animation gets the same frame, and the delays and loop count stay as they were.

The preview plays the framed GIF and updates as you change settings, so you can try styles before anything is saved.

How to use it

1. Select Choose GIF and pick a .gif, or drop one on the file row.
2. Pick a Style: Border, Polaroid, Film strip, Phone, or Browser window.
3. Adjust the style's settings. Border has a fill, colors, width, padding, and rounded corners. Polaroid has a caption. Browser window has text for the address bar. Every style has its own colors.
4. Turn on Drop shadow for a soft shadow on a background color, and set its blur and offset.
5. Check the size line under the preview, then select Download GIF.

Formats and limits

• Input: one GIF file.
• Output: a GIF named after the original with -framed added, such as cat-framed.gif. It keeps every frame, delay, and the loop count.
• The framed GIF is larger than the original by the border, padding, and frame edges, plus room for the shadow when it is on.
• Border width and padding go up to 120 px each, rounded corners up to 300 px or half the shorter side, shadow blur up to 60 px, and shadow offset up to 40 px.
• The frames times the framed width times the height has to stay under 60 million pixels. If the framed GIF would be larger, the tool says so and Download stays off.
• Captions and address text are drawn in your system's standard font.

Settings explained

Style

Border draws a frame of the width you choose. Polaroid adds even edges in the paper color and a deeper bottom for a caption. Film strip adds bands with sprocket holes above and below. Phone puts the GIF on a phone screen, upright or sideways to match its shape. Browser window adds a title bar with three buttons and an address bar.

Border fill

Solid uses Border color. Gradient blends First color into Second color; at 0° it runs left to right and at 90° top to bottom.

Border width, Padding, and Padding color

Border width is the thickness of the colored frame. Padding adds space between the frame and the GIF in Padding color.

Rounded corners

Rounds the outer corners of the border. When the radius is larger than the border and padding together, the corners of the GIF are rounded too. Without a drop shadow the area outside the corners is transparent.

Colors and text for the styled frames

Each style keeps its own colors, such as Paper color and Caption color for Polaroid or Title bar color for Browser window. Caption and Address bar text are shortened with an ellipsis when they do not fit.

Drop shadow

Draws a shadow down and to the right of the frame. Shadow blur softens it, Shadow offset moves it further away, and Background color fills the space around the frame.

Privacy

Each frame is drawn on a canvas in this tab, and the GIF is encoded in a Web Worker, a background thread of the same page. Your GIF is not uploaded, and the new file is only written when you select Download GIF.

FAQ

Why do rounded corners look jagged?

A GIF pixel is either solid or fully clear, so a curve against transparency is drawn with whole pixels. Turn on Drop shadow and set Background color to the color of the page you will post on to get smooth corners.

Why does the shadow need a background color?

A shadow fades gradually, and GIF transparency cannot show partly see-through pixels. The background color gives the shadow something solid to fade into.

Where did the transparent parts of my GIF go?

With Border and no shadow they stay transparent. The Phone style shows a black screen behind them, Browser window a white page, and Polaroid and Film strip their paper and film colors.

Does framing change the speed or the frames?

No. Every frame is kept with its own delay, and the GIF loops the way it did before.

Related tools

• GIF Cropper - trim the GIF before adding a frame.
• GIF Resizer - shrink the GIF first so the framed one stays small.
• GIF Text Overlay - add a caption inside the frame.
• GIF Optimizer - make the framed GIF a smaller file.
• Image Border and Rounded Corners - add a border to a still picture instead.