Since I'm not sure if this programmatic-wise or photo edit-wise, I'm posting this here. I apologize if I had to post this somewhere else.
-webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */
-o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */
border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat;
<div id="div">Hello world!!!</div>
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.