1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: border-style</title>
5 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#border-style">
6 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
7 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
8 <style type="text/css">
9 p { padding: 1em; }
10 .one {border-style: dotted; border-color: navy; border-width: thick;}
11 .two {border-style: dashed; border-color: navy; border-width: thick;}
12 .three {border-style: solid; border-color: navy; border-width: thick;}
13 .four {border-style: double; border-color: navy; border-width: thick;}
14 .five {border-style: groove; border-color: orange; border-width: thick;}
15 .six {border-style: ridge; border-color: orange; border-width: thick;}
16 .seven {border-style: inset; border-color: orange; border-width: thick;}
17 .eight {border-style: outset; border-color: orange; border-width: thick;}
18 .nine {border-style: double groove; border-color: blue; border-width: thick;}
19 .ten {border-style: dotted double dashed solid; border-color: blue; border-width: thick;}
20 .eleven {border-style: none; border-color: red; border-width: thick;}
21 </style>
22 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-properties" title="8.5 Border properties">
23 </head>
24 <body>
25 <p>The borders below should be as described:</p>
26 <p class="one">
27 Blue and dotted.
28 </p>
29 <p class="two">
30 Blue and dashed.
31 </p>
32 <p class="three">
33 Blue and solid.
34 </p>
35 <p class="four">
36 Blue and double.
37 </p>
38 <p class="five">
39 Orange and groove.
40 </p>
41 <p class="six">
42 Orange and ridge.
43 </p>
44 <p class="seven">
45 Orange and inset.
46 </p>
47 <p class="eight">
48 Orange and outset.
49 </p>
50 <p class="nine">
51 Blue and double on top and bottom; Blue and grooved on the left and right.
52 </p>
53 <p class="ten">
54 Blue borders which are, in clockwise order from top: dotted, double, dashed, solid.
55 </p>
56 <p class="eleven">
57 This paragraph should have no border at all.
58 </p>
59 </body>
60 </html>