Border Image.

Borders are a great way to make your page look more interesting, however it can also be useful for organizing! Here is some info about how to set up certain ones properly.

First, get a border, whether it be from online (you can look up "html border image") or you can make one yourself. Make sure you know your dimensions, and if your making your own I recommend making a 400px by 400px image.

Understand that the image is divided up into 9 boxes, as the picture below shows. It's important to know what you intend to stylize the borders as. Say you want to make a book border, you'd want it to stretch so it reaches towards the corner. However, if you were doing something like bricks you'd want to make sure that the borders repeat, so you should draw the borders to be able to loop. You may need to do tweaking from time to time if the looping doesn't look correct.

You are able to determine how big the corners need to be, such as being 80px in a 400px image or an 1000px image, however you need each corner to line up or else different sides may look chopped up.

After you have made your border, and know the dimensions of the corners, upload them to your website (or if your using neocities like me, drag the image into the edit page.) From here, you'll want to add this to a class, such as a "row" class. I'll provide some example code that you can use and tinker with. (note, I am using a 400px by 400px image, with each corner being 80px)

.row{

border: 55px dotted; /*the "55px" is for the size of the overall border, the "dotted" is to have the actual border on your desired class.*/

border-image-source: url('https://yoursitename.neocities.org/folder/my-picture.png'); /*You can replace the fake site URL to the image to yours. If your image is in a folder you can do it like this: "https://yoursitename.neocities.org/folder/my-picture.png" remember that for every folder you have in per folder, you need to refer to it to get to the main file you want, like doing "folder1/folder2/folder3/picture.png" and so on.*/

border-image-slice:80; /*Where the styling will "cut" the border image you provided it per each corner.*/

border-image-width:inherit; /*optional depending on your html's organization, you can remove this if it doesn't help.*/

border-image-repeat: round; /*Where the pattern magic happens, you can also use "repeat", but I recommend round. You can get rid of this line if you want a stretch.*/

}

I hope this helps you out in designing your own site with custom borders. There are plenty of resources to research about such as on YouTube and other neocities websites (you can search for websites that revolve around html by filtering them with the "tags".) You can go to https://www.w3schools.com/cssref/css3_pr_border-image.php for some more info on border images and this site https://css-tricks.com/almanac/properties/b/border-image/ for one that also uses an example picture.