How To Add An Inset Border to Anything in Squarespace

May 10

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Border and outline codes are super similar in CSS. They have a weight, style, and color that you can use to help any block of content on your site stand out. But did you know they can be combined?! 😮

This tutorial will show you how to create an “inset” style border by using both border and outline properties for specific blocks of content on your Squarespace site.

Here is the main code that I used in this tutorial: Be sure to adjust the color and weight of the border and to pick the right block ID and/or selector for what you want to isolate.

#block-123456 {
background:#eee;
border: 1px solid #000;
outline: 15px solid #eee
}

Here are the selectors I used in the video:

Collage design image card: .design-layout-collage .image-card
Code Block: .code-block
Markdown Block: .markdown-block
List Section Cards: .list-item[data-is-card-enabled="true"]