borders
The border of the visual elements includes the border style, width and the color. These three properties are defined separately.
<div style="width:100%; float:left; height:auto;">
<div style="width:250px; float:left;"><div style="width:100px; height:100px; border:1px solid red;"></div>border:1px solid red;</div>
<div style="width:250px; float:left;"><div style="width:100px; height:100px; border:5px dotted green;"></div>border:5px dotted green;</div>
<div style="width:250px; float:left;"><div style="width:100px; height:100px; border:10px dashed black;"></div>border:10px dashed black;</div>
</div>border is a shorthand property of border-width, border-style, and border-color properties.
border-width
The border may be thick, thin or medium size. The width of the border may also be defined by the values measured in px, em or other units.
<div style="border:thin solid rgb(30,30,30); font-size:22px;">border-width:thin;</div>
<br>
<div style="border:medium solid rgb(30,30,30); font-size:20px;">border-width:medium;</div>
<br>
<div style="border:thick solid rgb(30,30,30); font-size:20px;">border-width:thick;</div>
<br>
<div style="border:10px solid rgb(30,30,30); font-size:20px;">border-width:10px;</div>
<br>
<div style="border:solid rgb(30,30,30); border-width:5px 10px; font-size:20px;">border-width:5px 10px;</div>
<br>
border-width property represents the width of the four sides.
border-top-width, border-right-width, border-bottom-width and border-left-width properties define the width of the top, right, bottom and left sides respectively.
what about more than one values for the border-width?
Different values for the width of the four sides may also be defined in one border-width property.
border-width:10px;
10px is the width of all of the four sides.
border-width:10px 20px;
top and bottom sides have width of 10px, and the width of the remaining two sides is 20px.
border-width:10px 20px 30px;
10px, 20px and 30px represent the width of top, right and bottom sides. And left side has the same width as right (20px).
border-width:5px 10px 15px 20px;
These four values define width for the top, right, bottom and top sides.
The above given rule is general and applicable on border-color, border-style and many other properties that you'll encounter in next tutorials (talking about the different values for the same property).
border-color
It defines the background-color of the border. The color value may be specified by rgb or hexadecimal values.
<div style="border:2px solid red; font-size:20px;">border-color:red;</div>
<br>
<div style="border:2px solid rgb(0,0,255); font-size:20px;">border-color:rgb(0,0,255);</div>
<br>
<div style="border:2px solid #ff0; font-size:20px;">border-color:#ff0;</div>
<br>
<div style="border:2px solid; border-color:red green; font-size:20px;">border-color:red green;</div>
<br>
border-style
There are many predefined styles for the border. The following are the styles of border.
<div style="border:1px none red; font-size:20px;">border-style:none;</div><br>
<div style="border:8px dotted gray; font-size:20px;">border-style:dotted;</div><br>
<div style="border:8px dashed gray; font-size:20px;">border-style:dashed;</div><br>
<div style="border:8px solid gray; font-size:20px;">border-style:solid;</div><br>
<div style="border:8px double gray; font-size:20px;">border-style:double;</div><br>
<div style="border:8px groove gray; font-size:20px;">border-style:groove;</div><br>
<div style="border:8px ridge gray; font-size:20px;">border-style:ridge;</div><br>
<div style="border:8px inset gray; font-size:20px;">border-style:inset;</div><br>
<div style="border:8px outset gray; font-size:20px;">border-style:outset;</div><br>
<div style="border:8px gray; border-style:solid dotted; font-size:20px;">border-style:solid dotted;</div><br>
border - A shorthand property
All of the above given properties for the border can be combined in one border property.
<div style="border:width style color;">
<div style="border:10px groove gray;"></div>
10px is the border-width, groove is the border-style and gray is the border-color.