How To Crop Images Into A Circle with CSS

Site wide CSS makes it super simple to streamline a design style, like fonts, colors, and buttons galore. It’s also great for images, and this weeks tutorial takes it a step further than a black and white filter or drop shadow.

You can actually use CSS to crop an image into a perfect circle or round the edges for a softer design. Check out the tutorial video below and when you are ready, grab the code to try it on your own site.


 
 

.sqs-block-image img{ border-radius: 50%; }

Not all images use the same name.

All Squarespace images respond to .sqs-block-image img but you can actually isolate specific image styles by using their specific image style name. For images set to poster image you can replace .sqs-block-image img with the element name: .sqs-block-image .design-layout-poster

Overlay, stack, layout, collage, card, and even product images all have unique names. You can get the full list in the image name index of my CSS Cheat Sheet.