0

I've looked at this documentation for border-image and I feel like I understand what each of the property values are supposed to do, but when playing with the numbers, I just can't seem to get it right.

Here's a JSFiddle for a skimmed down version of what I'm working on:

body {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
}
#About {
  margin-left: 250px;
  margin-right: 250px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
  border-style: solid;
  border-width: 30px;
  border-image: url(http://www.sandranathan.net/wp-content/uploads/2012/02/ROSE-BORDER-11668791_l-72.jpg) 600 500 600 round;
}
#About p,
h1 {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 28px;
}
<div id="About">
  <img src='https://c2.staticflickr.com/8/7153/6852073179_00961ba267.jpg' class='close_button' alt=null style="width: 5%; height: 5%" />
  <p>some stuff that needs a border</p>
</div>

When I have the values for border-image: slice, width, outset set to 600, 500,600 respectively, it seems to be kinda close to what I want in terms of image proportions. To get the image to go along the left and right sides, I have to decrease the inward offsets which messes up the proportions. Can someone explain to me what I've added or forgotten that's keeping this from working smoothly...or is border-image always this ridiculous to work with?

misterManSam
  • 24,303
  • 11
  • 69
  • 89
aweeeezy
  • 806
  • 1
  • 9
  • 22
  • [This border-image CSS generator may help you generate the correct properties](http://border-image.com/). I'm fairly certain that you need to also have the roses vertical so that they form a box - [like this](http://i.stack.imgur.com/cNWGH.png). You can then take a slice vertically and horizontally. It *is* confusing though. [Here is an answer of mine using border-image](http://stackoverflow.com/a/26858151/2930477) that may help as a practical example. – misterManSam Jan 16 '15 at 01:22
  • Thanks, this is so helpful! I just have one question about pre-editing the image. If my text box that needs a border is rectangular, let's say 500 x 1000 pixels, should I make a proportional/to-scale canvas in Photoshop and put a single cropped rose from the image I have in the JSFiddle in each corner? – aweeeezy Jan 16 '15 at 02:33

0 Answers0