Line Block Border

 
 

Want to make your lines a little extra special? Why not add an extra colored border around them!

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)
     

Here's a normal line:

Here's a line with a border:

Screen Shot 2017-03-09 at 16.57.23.png

Here's the code:

// LINE BLOCK BORDER //

.sqs-block-content hr {
background-color: #000000 !important;
border: #fecb2f 3px solid !important;
}


Or, if you'd like to have different colours and thicknesses around your line:

// LINE BLOCK BORDER //

.sqs-block-content hr {
background-color: #000000 !important;
border-top: #fecb2f 3px solid !important;
border-right: #fecb2f 3px solid !important;
border-bottom: #fecb2f 3px solid !important;
border-left: #fecb2f 3px solid !important;
}