How To Change The Horizontal Line In Squarespace

Most Squarespace sites have a standard grey horizontal line. This weeks CSS tutorial shows you how to change the color and size of that line, as well as some cool tricks like making the line dotted, dashed, or even striped! Watch this Squarespace CSS tutorial to learn how to change the style, and when you are ready, grab the codes below!


Pretty cool right? Custom codes are below. Let me know which one you decided to use in the comments below!

Change Line Color

Important note: You can do this in the main style editor, but if you want a special color for an individual page, this code will get you there! Just don’t forget to place the code between style brackets like this for page header code injection: <Style> brackets </style>

<style>.sqs-block-horizontalrule hr {
background: #50bdb8;/*adjust the line color*/
}</style>


Change Line Size

.sqs-block-horizontalrule hr {
height: 8px!important;/*adjust the line size*/
}

Dotted Line

.sqs-block-horizontalrule hr {
background: transparent!important;
border-top: 3px dotted #50bdb8;/*adjust the line color and size*/
}

Dashed Line

.sqs-block-horizontalrule hr {
background: transparent!important;
border-top: 3px dashed #50bdb8;/*adjust the line color and size*/
}

Striped Line

.sqs-block-horizontalrule hr {
background: #df89a4;/*adjust the small stripe color*/
border-top: 10px dashed #ffcfdd;/*adjust the big stripe color*/
}


Double Line

.sqs-block-horizontalrule hr {
background: #df89a4 ;/*adjust the bottom line color*/
height: 5px!important;/*adjust the bottom line size*/
border-top: 5px solid #50bdb8;/*adjust the top line size and color*/
}