How do I add a border around text box?

Hickory · March 19, 2016

I would like to add a border around some of my text boxes. how can this be done and is there a custom css code for this? I have tried using the markdown block and adding some css coding but for the life of me I can't get the banner to appear. However I am new with css, so if anyone has a code that would do the trick please help me out.

Edited March 19, 2016 by Hickory
Initial Revision

Challenger2 · March 19, 2016

Hi @Hickory.

Use a markdown, not a text box. In the markdown use code like this:

<div class="boxBorder">
Your text here...
</div>

Then in the custom css use the following code, adjusting the values for size and colour as you wish:

.boxBorder {
     border: 2px solid #990066;
     padding: 10px;
     outline: #990066 solid 5px;
     outline-offset: 5px;
   }

Hope this works for you.

Hickory · March 20, 2016

Yes Thats perfect, Thanks! How do i put more than one space between words and also how do I center align the text in markdown?

Challenger2 · March 26, 2016

Hi again @Hickory,

Markdown uses standard HTML, so to add an extra space, use

&nbsp

as in the following example:

     <body>
       Your`&nbsp`text`&nbsp`here
    </body>

Don't use the quote marks, and put a ';' after each (I couldn't get this system to just let me type that!) You can put as many in sequence as you like, each adds a 'non (line) breaking space'.

Centreing is just as easy. Use the style "text-align: center" as follows in any tag (note US spelling of 'center'):

<div style="text-align:center">This text will be centred.
<p>So will this paragraph.</p></div>

Or

<p style="text-align:center">This line will be centred.<br>
And so will this line.</p>

Let me know how you get on.

Edited March 26, 2016 by Challenger2

phobic · May 29, 2019

Thanks for this information. Does anyone know how to achieve this effect entirely from within a code or markdown block? The reason for this is that I would like to be able to change the border colours each time I use it, so having the code in the custom css isn't suitable.

Thanks in advance!

phobic · May 29, 2019

Thanks for this information. Does anyone know how to achieve this effect entirely from within a code or markdown block? The reason for this is that I would like to be able to change the border colours each time I use it, so having the code in the custom css isn't suitable.

Thanks in advance!

paul2009 · May 29, 2019

The best way is to add CSS for each box and name them accordingly. For example, instead of boxBorder, you could have

.boxBorderBlue {
 the blue styles go here
}
.boxBorderGreen {
 the green styles go here
}

Then in each Code Block, use

<div class="boxBorderBlue">

or

<div class="boxBorderGreen">

to get the effect you want.

pdbstl · March 9, 2020

Hi there,

Does anyone know how I would fill the text box with color? Additionally, how do I change the color of the linked text if I were to link it? Thanks in advance for any help!

tuanphan · March 10, 2020

12 hours ago, pdbstl said:

Hi there,

Does anyone know how I would fill the text box with color? Additionally, how do I change the color of the linked text if I were to link it? Thanks in advance for any help!

If you share link to text box on your site. I can take a look

tuesdayroo · October 14, 2020

Can someone help me on getting rounded corner borders on 'Our Special Area's for me?

I have tried all sorts of bits but I can't seem to marry up the code within markup box and custom css box.

I would also like to know how I can include the header within the box and make it <h2> - I can't seem to do this either.

website - https://gecko-plantain-cstw.squarespace.com/#/what-we-do

password - handmademedia2020

Thanks 🙂

tuesdayroo · October 14, 2020

Update - I've done the rounded borders but I don't understand how to keep the header within the rounded border box? If i place the ## Header within the {} it doesn't work at all and just shows as normal text.

Help please - thank you 🙂

tuanphan · October 16, 2020

On 10/15/2020 at 3:36 AM, tuesdayroo said:

Update - I've done the rounded borders but I don't understand how to keep the header within the rounded border box? If i place the ## Header within the {} it doesn't work at all and just shows as normal text.

Help please - thank you 🙂

Use this

header.Header {
    border: 2px solid #990066;
    padding: 10px;
    outline: #990066 solid 5px;
    outline-offset: 5px;
}

GemmaErnst · September 9, 2021

Hi @tuanphan Is there a way to increase the font size within the markdown box? ie, p2?

tuanphan · September 12, 2021

On 9/9/2021 at 2:52 PM, GemmaErnst said:

Hi @tuanphan Is there a way to increase the font size within the markdown box? ie, p2?

Use this CSS

.markdown-block * {
	font-size: 20px !important;
}

or use this syntax when adding markdown content code

here is text with <span style="font-size: 20px;">20 pixel text</span> end.

AnnaBailey · March 2

Hi there,

I've added this code and in preview mode it works but on the actual website it doesn't appear. Could you advise?

tuanphan · March 6

On 3/2/2023 at 7:54 PM, AnnaBailey said:

Hi there,

I've added this code and in preview mode it works but on the actual website it doesn't appear. Could you advise?

Can you share link to page where you use text box?

How do I add a border around text box?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources