Creating Custom Borders in Squarespace
With a little clever code you can add a border to just about anything on your Squarespace website! This is a quick overview of border basics for those new to customizing Squarespace with CSS.
Border Styles
There are eight main border styles you can use to create some creative codes. You can also set a border to hidden or none, but if we are talking about visible style, here is a quick showcase of your 8 design options.
SOLID
DASHED
INSET
OUTSET
GROOVE
RIDGE
DOUBLE
DOTTED
Border Radius
One of the most common places border radius is seen is to create those pill shaped buttons. A border radius pulls in the corner by a specific length: pixel, em/rem or a percentage. A specific length will pull in the edge horizontally and vertically equally, while a percentage pulls it in from the percentage of height and width. Check out these two examples to see the difference.
border-radius: 30px
border-radius: 30%
Customize Each Side
You can create a custom border for each side, changing the size, style or color. This example has a unique border around each side of this text block.
border-left: 5px solid red; border-top: 8px dashed #50bdb8; border-right: 10px dotted pink; border-bottom: 5px double #dcdcdc
Where can you use a border code in Squarespace?
Just about anywhere! On this page, I am using a combination of block ID’s to create the unique borders around simple text blocks. Images, buttons, form fields, text styles, and even entire sections in Squarespace 7.1 can have unique borders. To add a border to anything, use it’s code name (aka selector) like this code below, which will add a custom border to a small button. There are hundreds of unique selectors you can target in Squarespace, and the most common ones are listed in my Squarespace CSS cheat sheet, available at insidethesquare.co/css
