document.write("<style type=\"text/css\">.dotted:focus { outline :orange thick dotted ; } .dashed:focus { outline :orange thick dashed ; } .solid:focus { outline :orange thick solid ; } .double:focus { outline :orange thick double ; } .groove:focus { outline :orange thick groove ; } .ridge:focus { outline :orange thick ridge ; } .inset:focus { outline :orange thick inset ; } .outset:focus { outline :orange thick outset ; }</style>");
document.write("<ul>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : dotted ;\" size=\"40\" name=\"dotted\" class=\"dotted\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : dashed ;\" size=\"40\" name=\"dashed\" class=\"dashed\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : solid ;\" size=\"40\" name=\"solid\" class=\"solid\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : double ;\" size=\"40\" name=\"double\" class=\"double\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : groove ;\" size=\"40\" name=\"groove\" class=\"groove\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : ridge ;\" size=\"40\" name=\"ridge\" class=\"ridge\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : inset ;\" size=\"40\" name=\"inset\" class=\"inset\" type=\"text\" /></li>");
document.write("<li style=\"padding:.3em 0;\"><input value=\"outline-style : outset ;\" size=\"40\" name=\"outset\" class=\"outset\" type=\"text\" /></li>");
document.write("</ul>");