Our Network


Coming Soon


Coming Later

WebP Border Maker

World's Simplest WebP Tool

This free online tool lets you add a border to a WebP image. Just load your WebP image in the input editor, and you'll instantly get a WebP image with a border in the output editor. In the options, you can fine-tune the border's thickness and color, create a transparent border, and select the sides the border is added to. Additionally, you can choose the border type (inner, outer, or centered). Created by team Browserling.

᠎᠎᠎          Tool Options

Border Type

Draw a border around the WebP.
(By increasing its width and height.)
Draw a half-overlapping border
around the WebP. (Half of the
border gets drawn on the inside
of the WebP and the other
half increases WebP size.)
Add a border inside the WebP.
(The border overlaps the WebP.)

Border Location

Draw a border along the top
edge of the WebP.
Draw a border along the bottom
edge of the WebP.
Draw a border along the left
edge of the WebP.
Draw a border along the right
edge of the WebP.

Border Style

Choose the color of the border.
Adjust the border's width (in px).
To create a transparent border,
enter the color "transparent".
To create a semi-transparent
use the color picker or specify
a color with the alpha part in
hex code "#rrggbbaa" or RGBA
color code "rgba(R, G, B, A)".

What Is a WebP Border Maker?

With this online tool, you can add a border around your WebP images. Adding a border can make your WebP image more noticeable and attractive, and you can choose from three border types – an opaque border (a single color border), a semi-transparent border, or a completely transparent border. An opaque border is most often used to separate the WebP from the background it's placed on; a semi-transparent border creates a subtle separation from its background, while a transparent border can increase the free space around the WebP. In the options, you can also choose where you want to place the border – outside the WebP (increasing its size), in the center of the WebP (with half of the border overlapping the image), or inside the WebP (with the border fully overlapping it). By default, the border is placed along all edges of the WebP. However, you can customize the placement of the border along the top, bottom, right, or left edge of the WebP. You can specify the border width in the options in pixels. For example, it can be 10, 40, or 100 pixels. You can also customize the color and transparency of the border in the options. For example, you can specify the border color by using color names, such as "white", "green", or "yellow", or by choosing a color from the palette. Additionally, you can use hex codes or RGB codes to specify the exact shade of the border. To change the transparency of the border, adjust the alpha channel slider in the palette. You can also use the special color name "transparent" to create an entirely transparent border or use hex and RGBA color codes with an alpha component. If you need to remove a border from a WebP, then you can use our Remove WebP Border tool. Webp-abulous!


WebP Border Maker Examples

Click to try!

Thin Border Around a Peninsula

In this example, we add a thin, white, semi-transparent border around a WebP image of a peninsula. We'll be placing this WebP on our travel website, and this border will prevent it from blending into the website's background. The border is 15 pixels wide but as it's drawn inside the WebP, the width and height remain the same. (Source: Pexels.)

Required options
These options will be used automatically if you select this example.
Add a border inside the WebP.
(The border overlaps the WebP.)
Draw a border along the top
edge of the WebP.
Draw a border along the bottom
edge of the WebP.
Draw a border along the left
edge of the WebP.
Draw a border along the right
edge of the WebP.
Choose the color of the border.
Adjust the border's width (in px).

Golden Border

In this example, we add a bright, thick, gold-colored border to a WebP photo of the Tuscan Sun flower (also known as the Tuscan Gold flower). Adding such border draws significantly more attention to the WebP and highlights the beauty of the flower against the contrasting background. We apply the border only to the top and bottom parts of the WebP, creating two horizontal stripes, each 30 pixels wide, with 15 pixels inside the WebP and 15 pixels outside. (Source: Pexels.)

Required options
These options will be used automatically if you select this example.
Draw a half-overlapping border
around the WebP. (Half of the
border gets drawn on the inside
of the WebP and the other
half increases WebP size.)
Draw a border along the top
edge of the WebP.
Draw a border along the bottom
edge of the WebP.
Draw a border along the left
edge of the WebP.
Draw a border along the right
edge of the WebP.
Choose the color of the border.
Adjust the border's width (in px).

Add a Transparent Padding Around a WebP

In this example, we use the transparent border to increase the size of a WebP picture of donkey toys and add a lot of free space around it. The border is added as padding, entirely outside of the WebP, and to demonstrate the possibilities of this tool, it's added only on the right, left, and top sides (the bottom side is skipped as it's not selected via a checkbox in the options). The padding width is 50 pixels, thus the width of the WebP increases by 100 pixels (50 pixels on each side) and the height increases by 50 pixels (50 pixels on the top side). As the transparent border can't be seen, it's visualized using a dashed line. (Source: Pexels.)

Required options
These options will be used automatically if you select this example.
Draw a border around the WebP.
(By increasing its width and height.)
Draw a border along the top
edge of the WebP.
Draw a border along the bottom
edge of the WebP.
Draw a border along the left
edge of the WebP.
Draw a border along the right
edge of the WebP.
Choose the color of the border.
Adjust the border's width (in px).

All WebP Tools

Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly convert a non-transparent WebP to a transparent WebP.
Quickly change one color to another in a WebP image.
Quickly remove the background from a WebP image.
Quickly add a background to a transparent WebP image.
Quickly cut out a rectangular or oval area from a WebP image.
Quickly pixelate an area of a WebP image.
Quickly blur an area of a WebP image.
Quickly sharpen an area of a WebP image.
Quickly convert a full-color WebP image to a grayscale format.
Quickly change the width and height of a WebP image.
Quickly interactively rotate a WebP image by any angle.
Quickly create multiple copies of the same WebP image.
Quickly remove a specific color from a WebP image.
Quickly increase or decrease the quality of a WebP image.
Quickly add a border around a WebP image.
Quickly remove a border surrounding a WebP image.
Quickly invert colors in an area of a WebP image.
Quickly convert printed text into a WebP image.
Quickly add a text label to a WebP image.
Quickly visualize the WebP transparency via an alpha mask.
Quickly extract the alpha channel from a WebP image.
Quickly remove the alpha channel from a WebP image.
Quickly fill the alpha channel in a WebP image.

Coming Soon

These WebP tools are on the way!
WebP Editor

Edit WebP images in your browser.

Convert WebP to APNG

Convert a WebP animation to an APNG animation.

Convert APNG to WebP

Convert an APNG animation to a WebP animation.

Convert WebP to GIF

Convert a WebP animation to a GIF animation.

Convert GIF to WebP

Convert a GIF animation to a WebP animation.

Extract WebP Frames

Extract all frames from a WebP animation.

Convert WebP to MP4

Convert a WebP animation to an MP4 video.

Convert MP4 to WebP

Convert an MP4 video to a WebP animation.

Compare WebP Images

Find the difference between two or more WebP images.

Compress WebP

Reduce the file size of a WebP image.

View WebP Metadata

View the metadata information of a WebP image.

Remove WebP Metadata

Remove all metadata information from a WebP image.

Edit WebP Metadata

Edit the metadata information of a WebP image.

Play WebP

Play WebP animations frame by frame.

WebP Viewer

View WebP images and in your browser.


Subscribe!

Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.

Enter your email here


Feedback. We'd love to hear from you! 👋



Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!