how to use fool lovers borders and make them

using befunky, foollovers frames, code editor (STEPS)

1. Visit foollovers webiste, make sure your browser has the translate to english option. I will use chrome for the tutorial.
   
2. On the navigation, please click the Material
   
3. In the menu box, click Borders and decorative frames
   
4. Choose borders and decorative frames you like to use. I will choose Border, decorative frame 08)
   
5. Click the html/css/img and scroll down until you see the image
   
6. Save the row of the corners. You must save all four of the corners (top, left, right, bottom) into your gallery.
   

1. Visit befunky.com and click Get Started
   
2. Click Create a Collage
   
3. On the bottom navigation, click Customize
   
4. Then click Background color > click the box with triangle on the bottom > and No color background. You'll see that the editor has transparent background. After that, close the color picker.
   

5. Go back to the bottom navigation and click Spacing
   

Slide to the left so it's going to be 0% spacing

After that, close the spacing.

6. Left or right click on the following marked boxes and delete cell, . you must have 4 corners now
   

This must look like the 4 corners

7. Import the images by uploading them one by one inside the collages. You right or left click on the cells.
   

8. Saving the collaged frame borders now!! We're going to proceed on hotlinking in imgur and putting the link in your code for the last step
   
   

1. Go to imgur.com and import the image we saved from befunky
   
2. Wait for the Upload Complete notification, wait for that because if you copy link too early your link will have blob on the link. (e.g. blob:https://imgur.com/ce14ff61-2b49-4b39-9ed6-5f9d390642ae)
   
3. You have the option to right click or hover the image and copy link
   
   
4. Copy the code below and add it to your styling, paste url of the image. adjust the image fill round, I made mine 750 fill round, play around that setting
   
   ⎗

   ✓

   1 2 3

   border-width:8px; border-style:solid; border-image: url("paste-url") 900 fill round;

THE CODE

(OUTPUT)

1
2
3
4
5
6
7

<style>
.border{
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/HxZZBd2.png") 900 fill round;
</style>
<img src="https://scripteds.neocities.org/placeholder.jpg" class="border">