AbAppletic AbAppletic - 4 months ago 5
CSS Question

How can I properly make this into an image border?

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.

Anyways, I'm trying to use the
property to make a nice border using this image:
Image of the border I found on the web

But it's not really working out with me. I'm getting weird appearences. Here's my code:

-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;
border-width: 100px;
border-style: solid;
height: 200px;
width: 100px;

<div id="div">Hello world!!!</div>


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

Similarly, the border should look like this

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.

Sliced Image

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.