So, I need some tips on fixing this. The results should turn out something like this (Not exactly, similarly):

Note that the width won't be defined. Could be extended

Pretty much, It should be repeating the middle part of the image and leaving the edges. But I'm getting a result of a newborn's drawings. So, is there any tips or solutions for this?? I've done research but none include my desires.

The problem is the image you're using for the border. The image that you're using is trying to be sliced up into each section of the border. border-image is not designed to take an image and line it up across the perimeter; it's designed to be split up into 9 sections (think tic-tac-toe board) where the center is your div area.

Now each slice of the image is trying to be applied to your respective borders, where the sides can be repeated, as in your case. CSS-Tricks has a nice page about this.

One way to possibly fix this, is to edit the image you want on your own, and set up your own borders via. copy-paste and rotation. This way you can slice out the appropriate sections when using it in CSS.

Email codedump link for How can I properly make this into an image border?