How to Use Borders from Material Websites

This tutorial shows you how to create decorative border and frames from material or graphic websites. You will learn how to combine the downloaded borders into one frame using befunky and then uploading the border to a file hosting website. The steps can be done in any device whether you're in phone or laptop!

You may skip file hosting part if you chose to upload the image in your dashboard directly. A file hosting website is an online cloud service where you can upload and store files. THey are helpful for website making because these websites let you direct link the images you upload, which you can use to display on your site. But if your dashboard has upload option for images, there's no need for the hosting site

Step A. Download Frames and Borders

1. Go to your material website of choice.
2. Use any browser that has a language translation if needed.


3. Find the border or frame you like and download all four corner images. You will need top and bottom left and right corners.

Step B. Put All the Corners Together Using Collage

1. Go to befunky and click Get Started


2. Choose Create a Collage


3. Make the collage transparent:
1. At the bottom menu, click Customize.


2. Select Background Color, then choose No color (icon looks like a box with a small triangle on the bottom).




3. Click the teardrop icon with a strikethrough.



After that, close it.
4. Go back to Customize and click Spacing and slide it to 0%.





After that, close it.
5. Delete cells
   
   by left or right-clicking until there are four corners left.


6. Option 1: You can drag and drop the border images if the befunky or material website allows it.


7. Option 2: Upload the 4 corner images, you can left or right-click on each cell to add the images.




8. Save the image as PNG. If possible, download it in high quality.

Step C. Hotlink Your Border Image and Use in the Code

1. Option 1: Use a file hosting website
1. Upload your saved border image to any file hosting website. Common choices are Imgur (which I am always using), Dropbox, Imgbb, Catbox, etc.
2. Wait until the upload is done, then Copy Link the image. Make sure there are no :blob: in links especially if you're using Imgur.




2. Option 2: Hotlink in your dashboard
1. Look for the website if it has Upload option.


2. Right click on the image and copy its link.


3. Open your code and paste the code below in the CSS
1. <style>
   .border {
   border: 7px solid;
   border-image: url("border-url") 900 fill round;
   }
   </style>
2. Replace border-url with the direct link to your border image.
3. You can play around the border width and fill round until it looks great.
4. Paste the code below anywhere in your HTML to apply the border to your element.
   <img src="/placeholder.jpg" class="border">
4. Results
1. Code:
   <style>
   .border {
   border: 12px solid;
   border-image: url("/tutorials/Codes/befunky_2025-7-6_19-53-20.png") 900 fill round;
   }
   </style>
   <img src="/placeholder.jpg" class="border">
2. Image: