How to Easily Create Image Shapes in Squarespace (Without Any Code)

Arches, circles, rounded corners, to get your image into those shapes in Squarespace used to require you to add in some CSS code.

But now Squarespace has made it easy to make any of those image shapes (and so many more) using the design panel of the image block. And you don’t have to use any code!

Just follow the next steps to shape your Squarespace images.

Table of Contents

Add an Image Block to Your Website

You can change the shape of your images in both Squarespace 7.0 and Squarespace 7.1 (Classic Editor & Fluid Engine), but there is a different method of adding image blocks in the two versions.

Add an Image Block in Squarespace 7.0

1. Hover over the page content and click EDIT

2. Hover the area you want to insert your image

3. Click on the + sign (insertion point) then choose Image from the list

4. In the Content tab click + to upload your image, add an image from your image library or add a stock image.

Add an Image Block in Squarespace 7.1

1. Click EDIT in the top left hand corner of the page

2. Hover over the section you want to insert your image and click + ADD BLOCK

3. Select Image from the pop-up and drag the block into place

4. Click on the + in the middle of the blank block to add your image or click the pencil icon to add the image from the Content tab of the image editor.

Related Post: Optimizing Images to Improve Your SEO

---

Change the Shape of a Squarespace Image

Now that you have your image in place we can get to the fun part – making shapes! First, we need to get to the Design tab of your image editor.

1. Click on your image

2. Click the pencil icon in the menu

3. Click on Design to switch to the Design tab

If you are already in the image editor, skip the first two steps and just do step 3.

Round the Corners of Your Squarespace Image

One of the things you can do to change the shape of Squarespace images is to make the corners of the image rounded. You can make the corners lightly rounded, more rounded or even turn your shape into a circle. You can also choose to make only some corners rounded or have the corners rounded different amounts.

To Round All the Corners of Your Image Evenly

Under the label Corner Radius in the Design Tab you will see two squares. The solid square (which is the default position) allows you to round all the corners of your image evenly.

Just add a number in the place of the “0”. Then click Save when you find the perfect curve.

To Choose the Radius of Each Corner of Your Image

Click on the dashed or broken square under Corner Radius to choose the curve of each corner individually.

You will now see four boxes next to the squares. These boxes represent each corner of your image. From left to right these are the top left corner, top right corner, bottom right corner and bottom left corner.

Replace the “0” with a number in any of the boxes to change the curve of that corner. Then click Save.

Choose an Image Shape

So how about an arch shape, a diamond or a flower shape? You can easily make these shapes and more with Squarespace Image Shapes.

Click on Shape. Then click on Shape > below to see all your shape options. Choose a shape (it will preview the shape when you pick it) and click Save.

You can chose from square shapes (1:1) like the diamond, circle and flower, vertical shapes (2:3) like the popular arch shape and a few horizontal shapes (3:2).

Here’s just a few examples of the shapes you can make with your pics. I’m using a picture I took in Alberta just a few years ago. Yes, it really is that beautiful!

Upper curve shape

Diamond

Four petal flower

Arch

Horizontal oval

Now it’s your turn. See what you can make with all these image shapes!