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"]