Inset Border Trick for Anything in Squarespace // Squarespace Outline Tutorial

---
Border vs outline - if they aren't that different, why do we need both? So we can combine them to create an inset border for literally ANYTHING on a Squarespace site! That’s exactly what you‘ll learn in this tutorial.
---
---
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 week’s 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.

Below is the main code from this tutorial and the selectors that I used. 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
}

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

- - -
🔗 RELATED VIDEOS 🔗

- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
- - -
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

[InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[nannethcelebre]

You're awesome. Thank you for sharing this.

[michellereynolds]

When I open the Custom Css panel, I already have code from adding a custom font. If I try adding to this I get an error message. Do I need a new window and if so, where is this option? Thank you!

[ElishaZepeda]

Hi! I'm wondering if you could help me with something sort of related to this video.

I want to increase the spacing of a gallery (section) on mobile only. I've seen tut's for padding, but those only adjust the top/bottom/left/right. I'm needing to adjust the spacing WITHIN the gallery...

[pongsathornwongchalee]

Couldn't find the Chrome extension link, could you post it? Thanks!!!

[AlejandroandMarikaManzanares]

Hello and thanks for the useful tutorial, can you explain what I need to do to get a rounded outline for a round image? thx a lot

[alonzocuevas]

How do you know what code to put in for a specific color? and can you make the border a specific color as well?

[gauthamseran]

Thanks for this but this doesn't seem to work for me. As soon as I start typing the background and outline values I get syntax error on line 1 which is the blockId that the extension copied. Not sure what I'm doing wrong? Are you able to help? Thanks!

[chayaeaddy]

What about texts boxes separated by line?

[chloeseckman]

How do you change the color of the border?