Creating custom borders around text boxes in Squarespace

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 <div> tags.

markdown_border

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:

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.

 

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

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.


.pinkBorder { border: 2px dashed pink; padding: 50px; }

 

Watercolor Image Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.


.watercolorBorder { -webkit-border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; /* Safari 3.1-5 */ -o-border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; /* Opera 11-12.1 */ border-image:url(http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg) 30 30 round; border-width: 12px; padding: 50px; }

Inset Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.



.insetBorder { border: 10px inset; padding: 50px; }

Green Rounded Border

Everyday, millions of Americans make WordPress sites. Tears are shed and fists are shaken in the air. One day, we will live in an America where Squarespace isn't a privilige but a right. That day is very soon.



.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!