Add borders to website in 7.1 with CSS

allered · April 20, 2020

Hi Guys,

this is my first post on this Forum so Hi everybody!

I've built 5+ websites on the Squarespace platform as a Circle member and now I'm trying the new 7.1 system template.

I've already asked to support for that but they suggested me to solve it with custom code.

I need to add border all around the website, someone can help me with the CSS/HTML?

I've found this code snippet on google but it doesn't work because the borders are shown only on the first part of the page and not all around the website...

<head>
<style>
body {
    margin:0px;
    background-image: url(http://i.imgur.com/LhxKJpU.jpg);
    }
.top, .left, .right, .bottom {
    display: block;
    position:absolute;
    width:100%;
    height:100%;
    }   
.top {
    border-top: 1em double #fff; top: 40px; z-index:100;
    }
.left {
    border-left: 1em double #fff; left: 40px; z-index:200;
    }
.right {
    border-right: 1em double #fff; right: 40px; z-index:300;
    }
.bottom {
    border-bottom: 1em double #fff; bottom: 40px; z-index:400;
    }           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

Thanks to anyone who helps me!

ChrisBartow · April 20, 2020

This works on my site, seems a lot easier. Added to custom CSS.

body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

allered · April 21, 2020

Thanks @ChrisBartow! It worked perfectly 🙂

laurasharp · June 10, 2020

Thanks so much @ChrisBartow! Can you or @allered tell me how I would change the color? I added the hex code in place of the text "solid red", but then the border becomes transparent.

tuanphan · June 10, 2020

3 hours ago, laurasharp said:

Thanks so much @ChrisBartow! Can you or @allered tell me how I would change the color? I added the hex code in place of the text "solid red", but then the border becomes transparent.

don't change "solid red"

change red

border: 25px solid red

=

border-width: 25px;
border-style: solid;
border-color: red;

laurasharp · June 10, 2020

Excellent. Thank you @tuanphan!

body { border:25px solid #c7ead5; }
header { margin:25px 25px 0 25px; }

June 15, 2020

What is the best way to customize template on squarespace. i want to migrate my website i will keen enough if i get it done at easy.

jessmartinez · July 7, 2020

Hi! I'm having trouble adding a custom image as a border/section divider. I'm following this tutorial but it's not working for me: https://www.youtube.com/watch?v=CL0mKjrVGDI

the website is befluent.ca, and this is my code. I just want to add a top border to my footer:

[data-section-id="5e82b6064550494f9872bfdb"] {
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5ddda52234a3a5066152f7c4/t/5eff47f7f00dfd0e1791b116/1593788409105/Border-WavyBlack.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -315px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Please help, thanks!

tuanphan · July 8, 2020

10 hours ago, jessmartinez said:
Hi! I'm having trouble adding a custom image as a border/section divider. I'm following this tutorial but it's not working for me: https://www.youtube.com/watch?v=CL0mKjrVGDI

the website is befluent.ca, and this is my code. I just want to add a top border to my footer:
[data-section-id="5e82b6064550494f9872bfdb"] {
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5ddda52234a3a5066152f7c4/t/5eff47f7f00dfd0e1791b116/1593788409105/Border-WavyBlack.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -315px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}
Please help, thanks!

It seems you solved?

jessmartinez · July 8, 2020

Yes, sorry about that. It took me a while to realize I needed to add another footer section above the original one so that the top border would show up. I hope it helps anyone who's also looking for an answer to this!

alexhether · August 29, 2020

On 4/20/2020 at 11:34 AM, ChrisBartow said:
This works on my site, seems a lot easier. Added to custom CSS.
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

Thanks so much, this worked really well! Is there a way to only apply this background to the desktop view, and keep the mobile view without a border?

tuanphan · August 30, 2020

18 hours ago, alexhether said:

Thanks so much, this worked really well! Is there a way to only apply this background to the desktop view, and keep the mobile view without a border?

Add to Home > Design > Custom CSS

@media screen and (min-width:992px) {
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }
}

alexhether · August 30, 2020

7 hours ago, tuanphan said:
Add to Home > Design > Custom CSS
@media screen and (min-width:992px) {
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }
}
Thank you so much!!

jakestollery · October 15, 2020

On 4/21/2020 at 1:34 AM, ChrisBartow said:
This works on my site, seems a lot easier. Added to custom CSS.
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

I want to have your children! 🙏🙏🙏🎉🎉🎉 X

Jeremyn · June 11, 2021

Hi guys,

I have this actual css code for a divider wave section with a png but I would like to swap it with a svg created on shapedivider.app

Actual css code:

section[data-section-id="60c0698a8d9e38432eaf5c08"]

{

.section-background {

overflow: visible;

&:before {

content: '';

width: 100%;

height: 100%;

top: 0;

left: 0;

background: inherit;

-webkit-mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom no-repeat;

mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom repeat;

margin-top: 1px;

transform: translateY(-100%);

position: absolute;

pointer-events: none;

@media screen and (max-width: 350px) {

-webkit-mask-size: 300% 50%;

mask-size: 300% 50%;

}}}

}

SVG:

Is there anyone that would know how to do this?

Cheers

tuanphan · June 11, 2021

4 hours ago, Jeremyn said:

Hi guys,

I have this actual css code for a divider wave section with a png but I would like to swap it with a svg created on shapedivider.app

Actual css code:

section[data-section-id="60c0698a8d9e38432eaf5c08"]

{

.section-background {

overflow: visible;

&:before {

content: '';

width: 100%;

height: 100%;

top: 0;

left: 0;

background: inherit;

-webkit-mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom no-repeat;

mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom repeat;

margin-top: 1px;

transform: translateY(-100%);

position: absolute;

pointer-events: none;

@media screen and (max-width: 350px) {

-webkit-mask-size: 300% 50%;

mask-size: 300% 50%;

}}}

}

SVG:

Is there anyone that would know how to do this?

Cheers

Can you share site url? We can check easier

Jeremyn · June 11, 2021

Absolutely, this is www.creativeportrait.net.au

Edited June 11, 2021 by Jeremyn

C628 · January 13, 2022

On 4/20/2020 at 10:34 AM, ChrisBartow said:
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

This is exactly what I am looking for, except I am looking to make the border on the bottom of the page, not the website, so that as you scroll there's a static frame surrounding the four sides of the browser window. Can anyone help me accomplish this? Thanks!

tuanphan · January 15, 2022

On 1/14/2022 at 2:51 AM, C628 said:

This is exactly what I am looking for, except I am looking to make the border on the bottom of the page, not the website, so that as you scroll there's a static frame surrounding the four sides of the browser window. Can anyone help me accomplish this? Thanks!

Can you share site url? We can check easier

XYX · February 10, 2022

Hi

Is there any code to just show the border on the left of the page?

Thanks

tuanphan · February 14, 2022

On 2/10/2022 at 8:13 PM, XYX said:

Hi

Is there any code to just show the border on the left of the page?

Thanks

change text "border" to "border-left"

ashleemundywebsitede · January 10

On 2/13/2022 at 7:48 PM, tuanphan said:

change text "border" to "border-left"

Thank you! I needed a multi-color border for my client and that worked perfectly 🙂

For reference, this is what I wrote:

body { border-left:10px solid #1d7e99 }
body { border-right:10px solid #607d51; }
body { border-top:10px solid #a14d28; }
body { border-bottom:10px solid black; }
header { margin:10px 10px 0 10px; }

Add borders to website in 7.1 with CSS

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ChrisBartow

allered

tuanphan

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest

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

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources