᠎᠎᠎          

Gif border adder

World's simplest gif tool
This online utility lets you add a border to an animated GIF file. You can switch between three border types (outer, middle, and inner), as well as change the color and width of the border's line. Each GIF file can be viewed in the browser in static or animated mode and downloaded with a single click. Created by GIF experts from team Browserling.
Border Type
Draw a line outside the GIF.
Draw a line along GIF edges.
Draw a line inside the GIF.
Border Color and Width
Animation border color.
Animation border thickness.
Online Viewing
Enable live preview of all
GIF frames in animation.
{frames}

What is a gif border adder?

learn more about this tool
This is a browser-based program that adds a border to static and animated GIFs. You can surround the animation with a line of any thickness and color, including a transparent line. When adding a border around an animation, its dimensions can be either enlarged or preserved, depending on the border drawing mode. There are three border drawing modes. The "Outer Border" mode leaves the animation as-is and draws a line around the animation frames. This mode increases the dimensions of the GIF by twice the border width (because the borders go on all sides of the animation). For example, if the input GIF is 200×200 pixels and the border size is 15 pixels, then the output GIF will be 230×230 pixels. The "Middle Border" mode draws a line exactly on the edge of frames. Half of the line goes on the outside of frames and half of the line goes inside. In this mode, GIF pixels near the edge are overwritten and new pixels are added around the GIF. The size of the GIF increases exactly by the border thickness. For example, if the GIF has the size 200×200 and the border size is 20, then the new GIF will have the size 220×220. The "Inner Border" mode leaves the GIF dimensions unchanged but overwrites the pixels in the GIF animation. By default, the border is added to all sides of GIF frames but you can also control individual top, left, right, and bottom borders through the checkboxes in the options. For example, you can draw a one-sided border by selecting just one checkbox, or select the opposite side checkboxes (top-bottom or left-right) to add create a two-sided border, or if you choose two adjacent borders (such as top-left, top-right, bottom-left, or bottom-right), you'll get a corner-border effect. To change the width of the border, you can use the border-width option and to change the color of the border, you can use the color picker. Use the special word "transparent" to make the border transparent. The transparent border is best paired with the "Outer Border" mode as it can be used to add padding and extra empty space around the GIF. You can view the animation online via the "Online Animation" option, and you can download the animation with a border via the "Save As" button. Gifabulous!

Gif border adder examples

Click to use
Draw a Middle Border
In this example, we surround the GIF animation of a cat with a 16px thick semi-transparent border. As we're drawing a centered border around the GIF canvas, we add 8 pixels on the outside of canvas and another 8 pixels on the inside of canvas. The pixels on the inside, overlap and overwrite the GIF pixels. We set the border color to dark blue with 40% transparency, which we enter as the hex color code #00266E64. (Source: Pexels.)
In this example, we surround the GIF animation of a cat with a 16px thick semi-transparent border. As we're drawing a centered border around the GIF canvas, we add 8 pixels on the outside of canvas and another 8 pixels on the inside of canvas. The pixels on the inside, overlap and overwrite the GIF pixels. We set the border color to dark blue with 40% transparency, which we enter as the hex color code #00266E64. (Source: Pexels.)
In this example, we surround the GIF animation of a cat with a 16px thick semi-transparent border. As we're drawing a centered border around the GIF canvas, we add 8 pixels on the outside of canvas and another 8 pixels on the inside of canvas. The pixels on the inside, overlap and overwrite the GIF pixels. We set the border color to dark blue with 40% transparency, which we enter as the hex color code #00266E64. (Source: Pexels.)
Required options
These options will be used automatically if you select this example.
Draw a line along GIF edges.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
Add a Space for Subtitles
In this example, a book author wanted to add subtitles to a GIF animation of his book. To make space for the captions, he added a border at the bottom of the frames. He made it 40px thick and filled it with solid Chenin color (hex = #E1CB77). To make sure the pixels at the bottom don't get overwritten and are preserved, he used the outer border mode. This mode expands the GIF height by the border size (40px). As a result, he got an animation with empty space below, where he can now add text with the "Add Text to GIF" tool. (Source: Pexels.)
In this example, a book author wanted to add subtitles to a GIF animation of his book. To make space for the captions, he added a border at the bottom of the frames. He made it 40px thick and filled it with solid Chenin color (hex = #E1CB77). To make sure the pixels at the bottom don't get overwritten and are preserved, he used the outer border mode. This mode expands the GIF height by the border size (40px). As a result, he got an animation with empty space below, where he can now add text with the "Add Text to GIF" tool. (Source: Pexels.)
In this example, a book author wanted to add subtitles to a GIF animation of his book. To make space for the captions, he added a border at the bottom of the frames. He made it 40px thick and filled it with solid Chenin color (hex = #E1CB77). To make sure the pixels at the bottom don't get overwritten and are preserved, he used the outer border mode. This mode expands the GIF height by the border size (40px). As a result, he got an animation with empty space below, where he can now add text with the "Add Text to GIF" tool. (Source: Pexels.)
Required options
These options will be used automatically if you select this example.
Draw a line outside the GIF.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
Draw an Inner Border
In this example, we draw a 2-pixel thin border around an animated GIF of a hand holding a flower. We select the inner border type, which preserves the original dimensions of the GIF. The black border creates a frame around the GIF canvas. (Source: Pexels.)
In this example, we draw a 2-pixel thin border around an animated GIF of a hand holding a flower. We select the inner border type, which preserves the original dimensions of the GIF. The black border creates a frame around the GIF canvas. (Source: Pexels.)
In this example, we draw a 2-pixel thin border around an animated GIF of a hand holding a flower. We select the inner border type, which preserves the original dimensions of the GIF. The black border creates a frame around the GIF canvas. (Source: Pexels.)
Required options
These options will be used automatically if you select this example.
Draw a line inside the GIF.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
Add Side Borders
In this example, we add two dark borders to the sides of a GIF animation that puts a focus on and emphasizes the sunset in the middle of the frame. The borders are drawn using 30-pixel lines and only on the left and right. They are painted over the original GIF pixels, darkening them by 50%. (Source: Pexels.)
In this example, we add two dark borders to the sides of a GIF animation that puts a focus on and emphasizes the sunset in the middle of the frame. The borders are drawn using 30-pixel lines and only on the left and right. They are painted over the original GIF pixels, darkening them by 50%. (Source: Pexels.)
In this example, we add two dark borders to the sides of a GIF animation that puts a focus on and emphasizes the sunset in the middle of the frame. The borders are drawn using 30-pixel lines and only on the left and right. They are painted over the original GIF pixels, darkening them by 50%. (Source: Pexels.)
Required options
These options will be used automatically if you select this example.
Draw a line inside the GIF.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
Draw an Outer Border
In this example, we add a transparent outer border around the iconic Quad Damage powerup from the Quake II game. The input GIF is 200x200 pixels and after adding a 50-pixel border on all sides, its size increases to 300x300 pixels. Transparent borders are very useful for making a GIF larger. To see the transparent border, you can change the "transparent" color to something like "red" and once you get the dimensions right, change it back to "transparent". (Created by: id Software.)
In this example, we add a transparent outer border around the iconic Quad Damage powerup from the Quake II game. The input GIF is 200x200 pixels and after adding a 50-pixel border on all sides, its size increases to 300x300 pixels. Transparent borders are very useful for making a GIF larger. To see the transparent border, you can change the "transparent" color to something like "red" and once you get the dimensions right, change it back to "transparent". (Created by: id Software.)
In this example, we add a transparent outer border around the iconic Quad Damage powerup from the Quake II game. The input GIF is 200x200 pixels and after adding a 50-pixel border on all sides, its size increases to 300x300 pixels. Transparent borders are very useful for making a GIF larger. To see the transparent border, you can change the "transparent" color to something like "red" and once you get the dimensions right, change it back to "transparent". (Created by: id Software.)
Required options
These options will be used automatically if you select this example.
Draw a line outside the GIF.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
Add a Corner Border
In this example, we have chosen a Silent Hill GIF animation with Harry Mason in the snowing Fog World. After losing control of his car, he finds himself in a dense fog that blurs the distinction between dreams and reality. To demonstrate another possibility of our program, we have added a blue corner line to the animation. It's drawn on the left and bottom sides of the frames. The line is 10 pixels wide and it covers half of the animation (5 pixels go inside of the GIF) and the other half goes outside of the GIF, adding 5 pixels to GIF's width and height. (Source: Konami.)
In this example, we have chosen a Silent Hill GIF animation with Harry Mason in the snowing Fog World. After losing control of his car, he finds himself in a dense fog that blurs the distinction between dreams and reality. To demonstrate another possibility of our program, we have added a blue corner line to the animation. It's drawn on the left and bottom sides of the frames. The line is 10 pixels wide and it covers half of the animation (5 pixels go inside of the GIF) and the other half goes outside of the GIF, adding 5 pixels to GIF's width and height. (Source: Konami.)
In this example, we have chosen a Silent Hill GIF animation with Harry Mason in the snowing Fog World. After losing control of his car, he finds himself in a dense fog that blurs the distinction between dreams and reality. To demonstrate another possibility of our program, we have added a blue corner line to the animation. It's drawn on the left and bottom sides of the frames. The line is 10 pixels wide and it covers half of the animation (5 pixels go inside of the GIF) and the other half goes outside of the GIF, adding 5 pixels to GIF's width and height. (Source: Konami.)
Required options
These options will be used automatically if you select this example.
Draw a line along GIF edges.
Animation border color.
Animation border thickness.
Enable live preview of all
GIF frames in animation.
All gif tools
Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly view, play and download individual GIF frames.
Quickly create a sprite sheet from all GIF frames.
Quickly create a GIF animation from a sprite strip.
Quickly change the speed a GIF animation is played at.
Quickly flip a GIF animation horizontally or vertically.
Quickly reverse all frames in an animated GIF.
Quickly minify a GIF and make it smaller in size.
Quickly change the background color of an animated GIF.
Quickly change how many times a GIF gets repeated.
Quickly rotate a GIF animation by the given angle.
Quickly change the width and height of a static or animated GIF.
Quickly crop a region from a GIF animation.
Quickly redact sensitive information from a GIF.
Quickly pixelate any region in a GIF animation.
Quickly blur any region in a GIF animation.
Quickly sharpen any region in a GIF animation.
Quickly increase or decrease the brightness of a GIF.
Quickly increase or decrease the contrast of a GIF.
Quickly make any color in a GIF transparent.
Quickly fill transparent GIF regions with a solid color.
Quickly delete one or more frames from an animated GIF.
Quickly extract multiple frames from a GIF.
Quickly preview a GIF animation at any framerate (fast or slow).
Quickly shuffle frames of a GIF animation.
Quickly increase the size of a GIF.
Quickly change the total playback time of a GIF.
Quickly surround a GIF animation with a border.
Quickly remove the border that surrounds a GIF animation.
Quickly add a background to an animated GIF.
Quickly remove the background from an animated GIF.
Quickly add any text (captions, subtitles) on an animated GIF.
Quickly add a running time clock to a GIF animation.
Quickly add a counter that shows frame numbers.
Quickly round the corners of a GIF animation.
Quickly remove colors from a GIF and leave only gray shades.
Quickly cut a frame range or a time interval from a GIF.
Quickly decrease the framerate of a GIF animation.
Quickly increase the framerate of a GIF animation.
Quickly generate a solid color or color gradient GIF.
Quickly generate an animation with random color pixels.
Quickly generate a tiny 1x1 spacer GIF.
Quickly make a GIF loop back and forth.
Quickly draw random pixels on an animated GIF.
Quickly optimize a GIF animation to use less memory.
Quickly print low-level details about a GIF and its frames.
Coming soon These gif tools are on the way
GIF Creator
Create animated GIFs in your browser.
Pause a GIF
Freeze a GIF at a specific frame.
Rearrange GIF Frames
Change the order of frames in a GIF animation.
Add Frames to a GIF
Insert one or more frames in a GIF animation.
Unzoom a GIF
Decrease the size of a GIF.
Refine GIF Edges
Smooth out the edges of a transparent GIF.
Add Sound to GIF
Add an audio track to a GIF.
See How a GIF Looks on Various Backgrounds
Draw a GIF on different backgrounds to see how it looks.
Fade-out a GIF
Gradually fade-out the frames of a GIF.
Fade-in a GIF
Gradually fade-in the frames of a GIF.
Cross-fade GIF Frames
Cross-fade a GIF frame by frame.
Cross-fade Two GIFs
Cross-fade two GIF animations.
Morph One GIF to Another
Smoothly transform one GIF into another GIF.
Stop GIF Loop
Stop looping the GIF and play it just once.
Normalize GIF Speed
Change the delay between all GIF frames to the same value.
Change GIF Framerate
Change the framerate of a GIF.
Change GIF Quality
Change the quality of a GIF.
Change GIF Canvas Size
Increase or decrease GIF canvas size.
Make a GIF Bigger
Increase the width and height of a GIF.
Make a GIF Smaller
Decrease the width and height of a GIF.
Convert PGN to GIF
Create a chess game animation from a PGN file.
Convert SGF to GIF
Create a go game animation from a SGF file.
Convert PDN to GIF
Create a draughts/checkers game animation from a PDN file.
Create a Solitaire Effect GIF
Generate a GIF animation of winning a Solitaire game.
Animate Game of Life
Create a GIF animation of Game of Life.
Convert GIF to Base64
Base64-encode a GIF.
Convert Base64 to GIF
Base64-decode a GIF.
Convert GIF to Base58
Base58-encode a GIF.
Convert Base58 to GIF
Base58-decode a GIF.
Convert Non-interlaced GIF to Interlaced GIF
Convert a sequential GIF to progressive GIF.
Convert Interlaced GIF to Non-interlaced GIF
Convert a progressive GIF to a sequential GIF.
Convert APNG to GIF
Convert an animated PNG to an animated GIF.
Convert GIF to APNG
Convert an animated GIF to an animated PNG.
Convert APNG to GIF
Convert an animated PNG to an animated GIF.
Convert GIF to Webp
Convert an animated GIF to an animated Webp.
Convert Webp to GIF
Convert an animated Webp to an animated GIF.
Convert GIF to AVIF
Convert a GIF animation to an AV1 animation (AVIF).
Convert AVIF to GIF
Convert an AV1 animation (AVIF) to a GIF animation.
Convert GIF to HEIF
Convert a GIF animation to a HEIF animation.
Convert HEIF to GIF
Convert a HEIF animation to a GIF animation.
Convert GIF to PNG
Export a single frame from a GIF to PNG.
Convert PNG to GIF
Convert a still PNG image to a static GIF.
Convert GIF to JPG
Export a single frame from a GIF to JPEG.
Convert JPG to GIF
Convert a still JPEG photo to a static GIF.
Convert GIF to BMP
Export a single frame from a GIF to BMP.
Convert BMP to GIF
Convert a still BMP file to a static GIF.
Convert GIF to BPG
Export a GIF animation to a BPG animation.
Convert BPG to GIF
Convert an animated BPG to an animated GIF.
Convert GIF to AVI
Convert a GIF animation to an AVI video.
Convert AVI to GIF
Convert an AVI video to a GIF animation.
Convert GIF to WMV
Convert a GIF animation to a WMV video.
Convert WMV to GIF
Convert a WMV video to a GIF animation.
Convert GIF to MP4
Convert a GIF animation to an MP4 video.
Convert MP4 to GIF
Convert an MP4 video to a GIF animation.
Convert GIF to MKV
Convert a GIF animation to an MKV video.
Convert MKV to GIF
Convert an MKV video to a GIF animation.
Convert GIF to MOV
Convert a GIF animation to a MOV video.
Convert MOV to GIF
Convert a MOV video to a GIF animation.
Convert GIF to GIFV
Convert a GIF animation to GIF video (GIFV).
Convert GIFV to GIF
Convert a GIF video (GIFV) to a GIF animation.
Convert GIF to Data URL
Create a Data URI from a GIF animation.
Convert Data URL to GIF
Reconstruct a GIF from a Data URI.
Convert GIF to ASCII Art
Draw one or more GIF frames as ASCII art.
Convert ASCII Art to GIF
Create an animation from multiple ASCII art drawings.
Convert GIF to ANSI Art
Draw one or more GIF frames as ANSI art.
Convert ANSI Art to GIF
Create an animation from multiple ANSI art drawings.
Convert GIF to Unicode Art
Draw one or more GIF frames using Unicode glyphs.
Convert Unicode Art to GIF
Create a GIF from multiple Unicode drawings.
Convert GIF to Braille Art
Draw one or more GIF frames using Braille characters.
Convert Braille Art to GIF
Create a GIF animation from Braille characters.
Change Colors in a GIF
Replace one color in a GIF with another.
Make GIF Black and White
Convert all colors in a GIF to just two black and white.
Extract GIF Colors
Find the color palette used in a GIF.
Extract GIF Color Index
Find the color index used in a GIF.
Randomize GIF Color Index
Randomly change the color indexes of a GIF.
Reduce GIF Colors
Remove colors from a GIF.
Re-quantize GIF Colors
Run various color quantization algorithms on a GIF.
Create a True Color GIF
Create a GIF with more than 256 colors.
Create a Binary Color GIF
Convert a 256-color GIF to a 2-color GIF.
Add Dithering to a GIF
Convert a non-dithered GIF to a dithered GIF.
Remove Dithering From a GIF
Merge dithered pixels and create a non-dithered GIF.
Change Delay of Frames
Change the delay interval between individual GIF frames.
Split a GIF
Split a GIF into two or more GIFs.
Join GIFs
Join two or more GIFs into a single GIF.
Shift a GIF
Shift GIF frames to the right or to the left.
Hide a Part of a GIF
Hide the selected area in a GIF by drawing a block over it.
Slice a GIF
Extract a part (a range of frames) from a GIF.
Duplicate a GIF
Create multiple GIF copies side-by-side.
Duplicate GIF Frames
Create multiple copies of individual GIF frames.
Skew a GIF
Skew a GIF animation by an angle.
Unskew a GIF
Reverse a skew in a GIF animation.
Swirl a GIF
Create a pixel whirl of any radius in a GIF.
Generate White Noise GIF
Create a GIF that animates white noise.
Create a Quasistatic GIF
Make a GIF animation go so slow that it appears almost static.
Create a Single-frame GIF
Create a static GIF that contains just one frame.
Create an Empty GIF
Generate a GIF that contains nothing.
Watermark a GIF
Add a semi-transparent watermark to a GIF animation.
Convert a GIF to a ZIP Archive
Extract all GIF frames in a folder and zip it up.
Add a Comment to a GIF
Add a hidden comment in GIF's metainfo section.
Delete GIF Metainfo
Clear all metainfo from a GIF.
Create a GIF of GIFs
Animate multiple GIFs at the same time side-by-side.
Create an Animated Message
Add an animation effect to a message.
Put One GIF on Another GIF
Layer two GIFs and put one GIF on top of another GIF.
Put a GIF on an Image
Overlay an animated GIF on any image or photo.
Put an Image on a GIF
Overlay any image or photo on an animated GIF.
Emulate a Slow Image
Convert any image to a GIF that emulates slow Internet speed.
Create a Loading GIF
Create a GIF animation of a loading spinner.
Glitch a GIF
Let Zalgo destroy a GIF animation.