​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
<style>
4
    div {
5
        border-style: solid;
6
        height: 75px;
7
        width: 215px;
8
        float: left;
9
        margin: 4vh;
10
    }
11
    .a {
12
        border-image: url(/pix/samples/3m.jpg) 30 30 round;
13
        border-width: 20px;
14
    }
15
    .b {
16
        border-image: url(/pix/samples/bullet1.png) 20 20 round;
17
        border-width: 20px;
18
    }
19
    .c {
20
        border-image: url(/pix/css/css3/properties/border-image-1.png) 28 28 round;
21
        border-width: 20px;
22
    }
23
    .d {
24
        border-image: url(/pix/css/css3/properties/border-image-1.png) 28 28 repeat;
25
        border-width: 20px;
26
    }
27
    .e {
28
        border-image: url(/pix/css/css3/properties/border-image-1.png) 16 16 round;
29
        border-width: 20px;
30
    }
31
    .f {
32
        border-image-source: url(/pix/css/css3/properties/border-image-1.png);
33
        border-image-slice: 30;
34
        border-image-width: 5;
35
        border-image-outset: 0;
36
        border-image-repeat: round;
37
        border-width: 2px;
38
    }
39
  hr {
40
    clear: both;
41
  }
42
</style>
43
​
44
<div class="a"></div>
45
<div class="b"></div>
46
<div class="c"></div>
47
<div class="d"></div>
48
<div class="e"></div>
49
<div class="f"></div>
50
​
51
<hr>
52
<p>Original images:</p>
53
<img src="/pix/samples/3m.jpg" alt="Border image">
54
<img src="/pix/samples/bullet1.png" alt="Border image">
55
<img src="/pix/css/css3/properties/border-image-1.png" alt="Border image">