help ukraine

We stand with Ukraine! If you're as appalled by Russia's abhorrent attack as we are, please support Ukraine and its people.

Frame

On this page

Add borders and effects around your images by applying the frame option. Frames can have different styles, from a plain solid color around the image to styles that bring elements of the image into the frame.

Demo

Frame style

'frame.style' - sets the type of frame that surrounds the image. Acceptable values are 'solid', 'mirror', 'edge', 'dither', 'none'. The default value is 'solid'.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=solid

Example image with solid black frame

'mirror' - creates a "silvered" semi-opaque frame around the image, allowing some of the image to be seen underneath. The underlying image is a mirror reflection of the nearby image.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=mirror

Example image with mirror frame

'edge' - creates a "silvered" semi-opaque frame around the image, and blurs the edges of the image underneath the frame.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=edge

Example image with edge frame

'dither' - creates a "silvered" semi-opaque frame around the image, and "feathers" the image under the frame.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=dither

Example image with dither frame

Frame color

'frame.color' - sets the color of the surrounding frame. The values are set with hex RGB/RGBA or a color name. The default value is 'black'.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=solid&frame.color=CA6902

Example image with solid colored frame

The example below uses the same color as above, with the 'mirror' style:

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=mirror&frame.color=CA6902

Example image with mirror-style colored frame

Frame width

'frame.width' - sets the width of the surrounding frame, in pixels or percentage (%). The default value is '5%'.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=mirror&frame.color=CA6902&frame.width=40

Example image with 40%-width frame

Rim color

'frame.rim.color' - sets the color of the inner edge of the surrounding frame. The values are set with hex RGB/RGBA or a color name. The default value is 'white'. The example below has been changed to black.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=mirror&frame.color=white&frame.width=40&frame.rim.color=black

Example image with black-rimmed frame

Rim width

'frame.rim.width' - sets the width in pixels or percentage (%) of the inner edge of the surrounding frame. The default value is '1'.

https://sirv.sirv.com/Examples/test-sky.jpg?frame.style=mirror&frame.color=white&frame.width=40&frame.rim.color=black&frame.rim.width=6

Frame with 6%-width black rim

Was this article helpful?

Get help from a Sirv expert