How to Create Rounded Corners and Unique Shapes for Your Images in Squarespace (No Coding!)
Squarespace has made some exciting new updates to its image blocks! Instead of needing to use outside software like Photoshop or Canva to create fancy graphics and image shapes, you can now use native functions within Squarespace to create rounded corners or unique shapes for your images! The best part? No code!
If you’re looking to take your design aesthetic to the next level, here’s how you can easily add rounded corners, circles, arches, and other unique shapes to your images in Squarespace.
How to give your images rounded edges in Squarespace
Go to the page and section where you’d like to add your image
Click EDIT on the page
Add a new Image Block
Double click on the image block to access its settings
In the Content tab, upload your image
In the Design tab, find the corner radius section and click the first icon to apply the same radius to the entire image
Enter an integer from 1-900 such that the rounding matches what you had in mind -- the greater the value, the more rounding
How to create an arch-shaped image in Squarespace
Go to the page and section where you’d like to add your image
Click EDIT on the page
Add a new image block
Double click on the image block to access its settings
In the Content tab, upload your image
In the Design tab, find the corner radius section and click the second icon (a square broken into 4 corners) to adjust each corner individually.
Adjust the upper right and upper left radii to a really high value, whatever works for your arch shape!
Image Sizing - Fit and Fill, what's the difference?
In the design settings of the Image, you'll see the Fit and Fill options. While these don't exactly translate to fun shapes, it's important you understand how these work so you can decide how you want your images to display.
Fit
To change the way your picture looks in the image block (the blue square) you can switch between fit and fill
Fit will retain the aspect ratio of the original image. It will have extra space surrounding it (top or bottom) so the image fits within the bounds of its container without cropping.
If you make the image block larger or smaller the image will resize but may not fill the entire image block
Fill
Fill will remove the padding so the image expands to fill the whole container, which may result in some cropping depending on the dimensions of your container and the image you are working with.
This may result in not showing the entire image
As you resize your image block, your image will show more or less of the image
Tip! Use the Focal Point to focus on a certain area of the image so it doesn't get cropped out
If you want more details on this, check out our full breakdown of resizing and cropping your images with Squarespace Fluid Engine
How to create a circular image or other shapes in Squarespace
Go to the page and section where you’d like to add your image
Click EDIT on the page
Add a new image block
Double click on the image block to access its settings
In the Content tab, upload your image
In the Design tab, click Shape to access preset shapes that you can choose to apply to your image
Toggle between the different aspect ratio tabs to find the shape that you like best
Click Elements in the left side bar menu.
Type in photo frame, then click see all to see all the available photo frames.
Drag a frame you like to the canvas
Resize your frame to fill as much of the canvas as possible.
Your downloaded PNG image with the transparent background will be the size of your canvas, not just the photo frame or picture on the canvas. This is why its important to make the image take up as much of the canvas as possible to eliminate any extra blank space.
Upload an image to Canva that you want to use, then drag your image into the frame
When you are ready to save your image, Click the Share button, then select Download
Select PNG and Transparent background.
A transparent background background means that the background canvas of your Canva graphic will be totally transparent, you won't be able to see it! Which means you can add the graphic on top of any background color and you won't see the white border.
Then click Download
Upload your new image to your Squarespace image block!
You can see the blank space around the polaroid in the Image Block above. This is that extra white space we had on the Canva canvas that is now transparent.
You can access many photo frames in Canva with the free account. However if you'd like to download the image as a PNG you will need to sign up for a Canva Pro. You can get a Canva Pro 30 day trial to be able to download a PNG with transparent background.
Overlapping your Images and Sections
By creating overlapping images, shapes, and sections around your site, you can create unique and interesting layouts to help your website stand out from the crowd.
Luckily, Squarespace makes this super easy to do in their new, ultra flexible Fluid Engine editor. Here's how:
Add the images that you want to overlap to a section of your site using image blocks
Drag the image blocks to position them over each other in whatever layout you want.
To change the order of your images, click on one of the image blocks and a toolbar will pop up above the image
To move the image forward and above the other image, click the icon with the solid box on the top of the dashed line box.
To move the image behind, click the icon with the solid box behind the dashed line box.
The first image had the lilac behind the peony and in the second it is in front.
This layering effect works with shape blocks and text too.
In the image below, the shape block (white square) is in the very back, and then the image and text are on top of the shape.
To take this layering one step further you can layer your image over a shape block to create overlapping sections!
To create this effect you will layer one of your shaped images over a Shape Block that is the same color as the page section below. This will make it look like your image is ovlapping over the 2 sections!
You can see where one page section ends and the other begins in the second image.
You can get the full tutorial on how to achieve this look in this post and learn more about Shape Blocks here
Squarespace Image Shape Layout Inspiration
Now that you've learned how to make rounded corners and unique shapes with your images, lets check out a few examples to get inspired!
Our Leon Template has sections with several different shaped images and uses arched shaped images throughout the website.
2. Our Gigi Rose Template uses layered images and shape blocks to create a more complex design look with overlapping images and sections.
Our Verano Template uses fun image shapes throughout the website to create an elevated designer look.
Different image shapes can completely change up the vibe of a Squarespace website. Experiment with some of these different options and let us know your favorite combos!
Loved that post? Check out some more design tips below!
How to create a vertical line in Squarespace (7.0 & 7.1)
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
If you liked this post, Pin it to Pinterest! 👇🏻
