Border Effect for Image Shapes

What You'll Create

Visible borders around shaped images that follow the contour of custom image masks. Whether your image is circular, wavy, or any other shape, the border traces that exact outline, adding definition and polish.

The Problem It Solves

Squarespace's image shape feature crops images into fun shapes, but doesn't offer borders that follow those shapes. Standard CSS borders only create rectangles. This technique applies borders that match any image shape.

Perfect For

Profile photos, Team member images, Decorative frames, Portfolio thumbnails, Feature highlights

What Makes This Different

For simple shapes, you can layer a shape block underneath the image. For complex or custom shapes, this technique uses a special shadow effect that traces the exact edge of the image mask. The result is a crisp outline that follows every curve and corner of your shaped image.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Image block with shape mask, Section anchor ID

• Toolkit Title: Image Shapes Border

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support