<html>
<head>
<title>Abakada CSS Demo: border Attribute</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="JavaScript" src="bwiz.js"></script>
<style type="text/css">
<!--
<!--
#theDiv { width: 70%; margin-left: 30; margin-right: 30;
padding: 10; text-align: center;
background: ghostwhite }
-->
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: border Attribute</h2></div>
<hr size=1 width=92%>
<center>
<h5>This example illustrates the various values an element's <b>border</b> style attribute can assume.<br>
Note the CSS declaration as you modify the object's composite border characteristics.</h5>
<br>
<div id="theDiv">
<p id="msg">The border properties must be defined in this order: <br>
border-weight, border-style, border-color. </p>
<h5 id="theSyntax">Syntax { border: none }</h5>
</div>
<p><b>Select from these options to modify the DIV's border properties</b></p>
<p><label id="bWidthLabel" for="bWidth">Width: </label>
<select id="bWidth" onchange="chgBorder ( )">
<option value="" selected>
<option value="thin">thin
<option value="medium">medium
<option value="thick">thick
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="10">10
<option value="15">15
<option value="20">20
</select>
<label id="bStyleLabel" for="bStyle">Style: </label>
<select id="bStyle" onchange="chgBorder ( )">
<option value="none" selected>none
<option value="solid">solid
<option value="double">double
<option value="groove">groove
<option value="ridge">ridge
<option value="inset">inset
<option value="outset">outset
</select></p>
<p><label id="bColorLabel" for="bColor">Color: </label>
<select id="bColor" onchange="chgBorder ( )">
<option value="">
<option value="aliceblue">AliceBlue
<option value="antiquewhite">AntiqueWhite
<option value="aqua">Aqua
<option value="aquamarine">Aquamarine
<option value="azure">Azure
<option value="beige">Beige
<option value="bisque">Bisque
<option value="black">Black
<option value="blanchedalmond">BlanchedAlmond
<option value="blue">Blue
<option value="blueviolet">BlueViolet
<option value="brown">Brown
<option value="burlywood">BurlyWood
<option value="cadetblue">CadetBlue
<option value="chartreuse">Chartreuse
<option value="chocolate">Chocolate
<option value="coral">Coral
<option value="cornflowerblue">CornFlowerBlue
<option value="cornsilk">Cornsilk
<option value="crimson">Crimson
<option value="cyan">Cyan
<option value="darkblue">DarkBlue
<option value="darkcyan">DarkCyan
<option value="darkgoldenrod">DarkGoldenrod
<option value="darkgray">DarkGray
<option value="darkgreen">DarkGreen
<option value="darkkhaki">DarkKhaki
<option value="darkmagenta">DarkMagenta
<option value="darkolivegreen">DarkOliveGreen
<option value="darkorange">DarkOrange
<option value="darkorchid">DarkOrchid
<option value="darkred">DarkRed
<option value="darksalmon">DarkSalmon
<option value="darkseagreen">DarkSeaGreen
<option value="darkslateblue">DarkSlateBlue
<option value="darkslategray">DarkSlateGray
<option value="darkturquoise">DarkTurquoise
<option value="darkviolet">DarkViolet
<option value="deeppink">DeepPink
<option value="deepskyblue">DeepSkyBlue
<option value="dimgray">DimGray
<option value="dodgerblue">DodgerBlue
<option value="firebrick">FireBrick
<option value="floralwhite">FloralWhite
<option value="forestgreen">ForestGreen
<option value="fuchsia">Fuchsia
<option value="gainsboro">Gainsboro
<option value="ghostwhite">GhostWhite
<option value="gold">Gold
<option value="goldenrod">Goldenrod
<option value="gray">Gray
<option value="green">Green
<option value="greenyellow">GreenYellow
<option value="honeydew">Honeydew
<option value="hotpink">HotPink
<option value="indianred">IndianRed
<option value="indigo">Indigo
<option value="ivory">Ivory
<option value="khaki">Khaki
<option value="lavender">Lavender
<option value="lavenderblush">LavenderBlush
<option value="lawngreen">LawnGreen
<option value="lemonchiffon">LemonChiffon
<option value="lightblue">LightBlue
<option value="lightcoral">LightCoral
<option value="lightcyan">LightCyan
<option value="lightgoldenrodyellow">LightGoldenrodYellow
<option value="lightgreen">LightGreen
<option value="lightgrey">LightGrey
<option value="lightpink">LightPink
<option value="lightsalmon">LightSalmon
<option value="lightseagreen">LightSeaGreen
<option value="lightskyblue">LightSkyBlue
<option value="lightslategray">LightSlateGray
<option value="lightsteelblue">LightSteelBlue
<option value="lightyellow">LightYellow
<option value="lime">Lime
<option value="limegreen">LimeGreen
<option value="linen">Linen
<option value="magenta">Magenta
<option value="maroon">Maroon
<option value="mediumaquamarine">MediumAquamarine
<option value="mediumblue">MediumBlue
<option value="mediumorchid">MediumOrchid
<option value="mediumpurple">MediumPurple
<option value="mediumseagreen">MediumSeaGreen
<option value="mediumslateblue">MediumSlateBlue
<option value="mediumspringgreen">MediumSpringGreen
<option value="mediumturquoise">MediumTurquoise
<option value="mediumvioletred">MediumVioletRed
<option value="midnightblue">MidnightBlue
<option value="mintcream">MintCream
<option value="mistyrose">MistyRose
<option value="moccasin">Moccasin
<option value="navajowhite">NavajoWhite
<option value="navy">Navy
<option value="oldlace">OldLace
<option value="olive">Olive
<option value="olivedrab">OliveDrab
<option value="orange">Orange
<option value="orangered">OrangeRed
<option value="orchid">Orchid
<option value="palegoldenrod">PaleGoldenrod
<option value="palegreen">PaleGreen
<option value="paleturquoise">PaleTurquoise
<option value="palevioletred">PaleVioletRed
<option value="papayawhip">PapayaWhip
<option value="peachpuff">PeachPuff
<option value="peru">Peru
<option value="pink">Pink
<option value="plum">Plum
<option value="powderblue">PowderBlue
<option value="purple">Purple
<option value="red">Red
<option value="rosybrown">RosyBrown
<option value="royalblue">RoyalBlue
<option value="saddlebrown">SaddleBrown
<option value="salmon">Salmon
<option value="sandybrown">SandyBrown
<option value="seagreen">SeaGreen
<option value="seashell">Seashell
<option value="sienna">Sienna
<option value="silver">Silver
<option value="skyblue">SkyBlue
<option value="slateblue">SlateBlue
<option value="slategray">SlateGray
<option value="snow">Snow
<option value="springgreen">SpringGreen
<option value="steelblue">SteelBlue
<option value="tan">Tan
<option value="teal">Teal
<option value="thistle">Thistle
<option value="tomato">Tomato
<option value="turquoise">Turquoise
<option value="violet">Violet
<option value="wheat">Wheat
<option value="white">White
<option value="whitesmoke">WhiteSmoke
<option value="yellow">Yellow
<option value="yellowgreen">YellowGreen
</select></p>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>