1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>
5 CSS Border and Background: border-image #10 border-image-width
6 </title>
7 <meta content="Support for 4 values for the border-image-width property" name="assert">
8
9 <link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier">
10
11 <link href="http://www.w3.org/TR/css3-background/#the-border-image-width" rel="help">
12
13 <style type="text/css">
14
15 #test {
16 border : 10px solid red;
17 width : 20px;
18 height : 20px;
19
20 border-image-source: url(support/img-ref-1.png);
21 border-image-slice : 10;
22 border-image-width : 1px 5px 10px 15px;
23 }
24
25 #ref {
26 border-top : 1px solid #009900;
27 border-right : 5px solid #009900;
28 border-bottom : 10px solid #009900;
29 border-left : 15px solid #009900;
30
31 padding: 9px 5px 0 0;
32 width : 15px;
33 height : 20px;
34 }
35
36 </style>
37
38 </head>
39 <body>
40
41 <p>
42 Pass if both squares are identical.
43 </p>
44
45 <p id="test"></p>
46 <p id="ref"></p>
47
48
49
50 </body></html>