Creating custom borders with custom CSS
How Border Codes Work
Every border has a width, style, and color. You can use the property border to create one line of code that will create the same width, style, and color on every side of a selector, like this example that creates a solid red border 5px in width to any block of text.
.sqs-block-html {
border: 5px solid red
}Border codes have three important parts.
These three parts can be combined into one line of code, or edited separately. You can also create a code that changes one side at a time, like border-left or border-bottom.
-
Width
the first value in a border code represents the width of the border. PX is the most common width value type, recommended because it is the same on all screen sizes.
-
Style
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.
-
Color
The third value in a border code is the color. You can use any color type (HEX, rgb, rgba, hsl, hsla, or web safe color name)
Preview of border styles:
solid
dashed
groove
ridge
inset
dotted
double
outset
Changing shapes with 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%
Pro tips for borders
Borders can be added to just about anything in Squarespace → text blocks, image blocks, buttons, forms, even entire sections. This makes them a versatile tool for framing or separating content.
Large borders take up real space in your layout. A
20pxborder doesn’t just look thick—it actually reduces the inside space of your content area. In a tight layout, this can make things feel crowded. Use thinner borders if your design already feels compact.Borders become part of the element’s box size, while outlines do not. Outlines sit outside the element’s box, so they don’t shift padding or change layout spacing. In the example below, the border adds thickness inside the element’s box, but the outline floats on top without affecting layout.
.sqs-block-html {
border: 4px solid #333;
outline: 2px dashed red;
}