Image EditingLesson 207Free preview

Add Border to Image

This lesson is part of Web Developer Tools · All levels

Summary

The border adder provides a frame around the image with adjustable width and color. Border helps separate images from the background, unifies visual styles, or creates a look like a printed photo. The outer frame of the image adds to the canvas' dimensions, whereas the frames drawn into the interior do not.

Key points

The width of the border is measured in pixels and can be different for each side
The boundary outside the image adds to the canvas size
Color border should contrast with the content of the image
Transparent boundaries require PNG or WebP formats
Border differs from padding: padding provides a space of space within the boundary

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.