0

I've been researching for a while and still can't find a way to make this border on css, so far I've made only one side.

enter image description here

I mean the same border with css not with the picture

Pablo
  • 9
  • 4
  • 1
    can you share the code for the side you have made? – web-tiki May 28 '15 at 14:48
  • It was based on an example of another question http://jsfiddle.net/kywgsdjo/ – Pablo May 28 '15 at 15:02
  • 2
    You should add the code from your fiddle in the question itself. Also, you can check this question, the effect is almost the same : [Creating a droplet like border effect in css](http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/) – web-tiki May 28 '15 at 15:08
  • If you have already some code working, and it is just a partial solution, you should **always** share your code in the question – vals Jun 01 '15 at 07:54

1 Answers1

2

This is posible with css3. Take a look: https://developer.mozilla.org/es/docs/Web/CSS/border-image

First: define the width of your border, as you would usually do (border: 30px solid...); Then specify the caracteristics of the image with border-image:

-You need to set the image with ulr().

-Then set in px (no units) or percentage (%) how to slice the image to create the borders. Notice that to tile the border the image gets sliced in 9 sectors. This number is the distance from the borders of this slice. For example, in a 300x300 px like in this case, if you slice it at 100, you are generating 9 squares of 100x100.

-Finally say if it should repeat, round or stretch.

A tip: this is a bit difficult so my advice is that you make your image tilable in a 3x3 grid, this way the corners will fit the sides.

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}
<div class="box"></div>

Vendor prefixes arent very necesary any more: http://caniuse.com/#search=border-image

Vandervals
  • 5,774
  • 6
  • 48
  • 94