问题
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.
I mean the same border with css not with the picture
回答1:
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
来源：https://stackoverflow.com/questions/30509710/decorative-border-css