ttwf-css3background-border-style-values.htm (2221B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Backgrounds and Borders Test: border_style_values</title> 5 <link rel="author" title="disound" href="mailto:disound@gmail.com" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-style" /> 7 <meta name="assert" 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" /> 8 <style> 9 #test { 10 width: 100%; 11 height: 100%; 12 } 13 #test div { 14 float: left; 15 height: 100px; 16 width: 100px; 17 margin: 25px; 18 display: block; 19 position: relative; 20 border-width: 5px; 21 background: blue; 22 } 23 #none { 24 border-style: none; 25 } 26 #hidden { 27 border-style: hidden; 28 } 29 #dotted { 30 border-style: dotted; 31 } 32 #dashed { 33 border-style: dashed; 34 } 35 #solid { 36 border-style: solid; 37 } 38 #double { 39 border-style: double; 40 } 41 #groove { 42 border-style: groove; 43 } 44 #ridge { 45 border-style: ridge; 46 } 47 #inset { 48 border-style: inset; 49 } 50 #outset { 51 border-style: outset; 52 } 53 </style> 54 </head> 55 <body> 56 <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> 57 <div id="test"> 58 <div id="none">none</div> 59 <div id="hidden">hidden</div> 60 <div id="dotted">dotted</div> 61 <div id="dashed">dashed</div> 62 <div id="solid">solid</div> 63 <div id="double">double</div> 64 <div id="groove">groove</div> 65 <div id="ridge">ridge</div> 66 <div id="inset">inset</div> 67 <div id="outset">outset</div> 68 </div> 69 </body> 70 </html>