<!DOCTYPE html><html><head><title>CSS Backgrounds and Borders Test: border_style_values</title><linkrel="author"title="disound"href="mailto:disound@gmail.com"/><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-border-style"/><metaname="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"/><style>#test{width:100%;height:100%;}#testdiv{float:left;height:100px;width:100px;margin:25px;display:block;position:relative;border-width:5px;background:blue;}#none{border-style:none;}#hidden{border-style:hidden;}#dotted{border-style:dotted;}#dashed{border-style:dashed;}#solid{border-style:solid;}#double{border-style:double;}#groove{border-style:groove;}#ridge{border-style:ridge;}#inset{border-style:inset;}#outset{border-style:outset;}</style></head><body><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><divid="test"><divid="none">none</div><divid="hidden">hidden</div><divid="dotted">dotted</div><divid="dashed">dashed</div><divid="solid">solid</div><divid="double">double</div><divid="groove">groove</div><divid="ridge">ridge</div><divid="inset">inset</div><divid="outset">outset</div></div></body></html>
