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?

Array

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine