Border

There are three characteristics you can set for the border elements.

i. width
ii. color
iii. style

By combining the 4 possible parts of the border element (border-top, border-right, border-bottom, border-left, border) with all possible characteristics (width, color, style or all) we get 20 possible properties that can be set for the border element as given below.


PropertiesWIDTHCOLORSTYLEALL
boder-topborder-top-widthborder-top-colorborder-top-styleborder-top
boder-rightborder-right-widthborder-right-colorborder-right-styleborder-right
boder-bottomborder-bottom-width border-bottom-color border-bottom-styleborder-bottom
boder-leftborder-left-widthborder-left-colorborder-left-styleborder-left


i. Border Width
<width> - The possible values are.

ValuesDescription
<length>specifies a fixed width.
thin | medium | thick
inherit

snippet
<html>
<head>
<style>
button {margin: 5px; border-style: solid}
</style>
</head>
<body>
<form>
<button style="border-width=thin">thin</button>
<button style="border-width=thick">thick</button>
<button style="border-width=medium">medium</button>
<button style="border-width=5px">Width 5px</button>
</form>
</body>
</html>

ii. Border Color
<color> - The possible values are

ValuesDescription
<color>
inherit

snippet
<html>
<head>
<style>
button {margin: 5px; border-style: solid}
.aqua {border-color: aqua;}
.lime {border-color: lime;}
.purple {border-color: purple;}
</style>
</head>
<body>
<form>
<button class="aqua">aqua</button>
<button class="lime">lime</button>
<button class="purple">purple</button>
</form>
</body>
</html>

iii. Border Style
<style> - The possible values are

ValuesDescription
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
inherit

snippet
<html>
<head>
<style>
* button {margin: 5px}
.none {border-style: none;}
.hidden {border-style: hidden;}
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: bouble;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
</style>
</head>
<body>
<form>
<button class="none">none</button>
<button class="hidden">hidden</button>
<button class="dotted">dotted</button>
<button class="dashed">dashed</button>
<button class="solid">solid</button>
<button class="double">double</button>
<button class="groove">groove</button>
<button class="ridge">ridge</button>
<button class="inset">inset</button>
<button class="outset">outset</button>
</form>
</body>
</html>
Related Tutorial
2. Padding
3. Margin
4. Border

5. Cursors
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #