While creating a website on Squarespace, you may want to have a section of text surrounded by a border. For example, if you are creating a pricing table, you want to be able to have some space on both sides of the text as well as encapsulate each pricing tier. In order to do this, we will make use of the Markdown block feature rather than the text block. In the Markdown block, enter whatever text that you want to display as in the example below, but surround the text with HTML tags.
Each class identifies a custom border style that you will make. To make different styles, simply use different class names. In the example above, we used the class “coolBorder” (you can call it anything you want).
Now we have complete control over this text block and its border properties. To change the border properties, we have to add custom CSS to that particular tag, “coolBorder”. To get to custom CSS, go to the Home menu, then click Design → Custom CSS. Here is the custom CSS we added:
Each class identifies a custom border style that you will make. To make different styles, simply use different class names. In the example above, we used the class “coolBorder” (you can call it anything you want).
Now we have complete control over this text block and its border properties. To change the border properties, we have to add custom CSS to that particular tag, “coolBorder”. To get to custom CSS, go to the Home menu, then click Design → Custom CSS. Here is the custom CSS we added:
.coolBorder {
border: 2px solid black;
padding: 50px;
outline: black solid 5px;
outline-offset: 5px;
}
And here is the result we got:
Here are a few more examples of the borders in action and their corresponding code. Just copy and paste the one you like into the Custom CSS box. Make sure to change the class accordingly!
Pink Dashed Border
.pinkBorder {
border: 2px dashed pink;
padding: 50px;
}
Watercolor Image Border
.watercolorBorder {
-webkit-border-image:url(https://i.imgur.com/JFBFlkw.jpg) 30 30 round; /* Safari 3.1-5 */
-o-border-image:url(https://i.imgur.com/JFBFlkw.jpg) 30 30 round; /* Opera 11-12.1 */
border-image:url(https://i.imgur.com/JFBFlkw.jpg) 30 30 round;
border-width: 12px;
padding: 50px;
}
Inset Border
.insetBorder {
border: 10px inset;
padding: 50px;
}
Green Rounded Border
.roundedBorder {
border: 2px solid yellowgreen;
border-radius: 20px;
padding: 50px;
}
Hopefully this helps you make custom and amazing looking websites. If you have any great border tips to share or any questions, please let us know in the comments!
Leave a Reply