1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds and Borders Test: border_style_values</title>
4 <link href="mailto:disound@gmail.com" rel="author" title="disound">
5 <link href="http://www.w3.org/TR/css3-background/#the-border-style" rel="help">
6 <meta content="'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. <border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset" name="assert">
7 <style>
8 #test {
9 width: 100%;
10 height: 100%;
11 }
12 #test div {
13 float: left;
14 height: 100px;
15 width: 100px;
16 margin: 25px;
17 display: block;
18 position: relative;
19 border-width: 5px;
20 background: blue;
21 }
22 #none {
23 border-style: none;
24 }
25 #hidden {
26 border-style: hidden;
27 }
28 #dotted {
29 border-style: dotted;
30 }
31 #dashed {
32 border-style: dashed;
33 }
34 #solid {
35 border-style: solid;
36 }
37 #double {
38 border-style: double;
39 }
40 #groove {
41 border-style: groove;
42 }
43 #ridge {
44 border-style: ridge;
45 }
46 #inset {
47 border-style: inset;
48 }
49 #outset {
50 border-style: outset;
51 }
52 </style>
53 </head>
54 <body>
55 <p>Test passes if there are green squares with border style from left to right: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset.</p>
56 <div id="test">
57 <div id="none">none</div>
58 <div id="hidden">hidden</div>
59 <div id="dotted">dotted</div>
60 <div id="dashed">dashed</div>
61 <div id="solid">solid</div>
62 <div id="double">double</div>
63 <div id="groove">groove</div>
64 <div id="ridge">ridge</div>
65 <div id="inset">inset</div>
66 <div id="outset">outset</div>
67 </div>
68
69
70 </body></html>