nara's tutorials

hello everyone!! welcome to my tutorial blog, where i will teach you a few coding tricks to make your page super duper cute! this will include tips that worked well for me, so they may not work for everyone, but i'm open to helping if that happens. i'll probably update this occasionally, so feel free to request anything you may have questions about. let's begin!!!

saturday august 16, 2025

1. border images

let's face it, using the default borders all the time can get a little boring. in this tutorial, i'm gonna teach you how to spice up your profile and give your borders a whole new look.

resources

firstly, you need to find a border image that you like. i use this site: https://rentry.co/border (however, feel free to use any resource you want!)

directions

when you get there, click on the 'borders' link. there's a multitude of different options, but i find the really tiny ones to work the best. the bigger ones are kinda difficult to work with in terms of sizing, so stick with ones that look similar in size to these:  

next, right click on the border you want and copy the image address. you're going to need it soon.

code

now for the fun part! for this example, we are going to place a border image around the entire contact section, including the header. don't forget your style tags!!

.profile .contact {

border-style: solid;

border-width: 7px;

border-image: url('insert border image url here') 7 fill round; }

the dimensions may not be perfect the first time, so adjust the values to your liking. from what i've noticed, increasing the border width increases the thickness of the border image, while increasing the 'fill round' value stretches the border around the container. 7px works well for both, but sometimes increasing them to 8px or 9px works well too.

results

when everything is done, your contact box should look something like this: