Make delicious recipes!

Chapter 5: Border styles



Border of an element has three properties which can be specified - color, style and width.
Example 1:

border-color:yellow;
border-style:solid;
border-width:2px;


Further, each of the above property can be specified independently for 4 sides: left, right, bottom and top.
This gives the following 4x3=12 properties:

border-bottom-color

border-bottom-style

border-bottom-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-top-color

border-top-style

border-top-width



Example 2:

border-right-color:yellow;
border-left-color:red;
border-top-color:green;
border-bottom-color:blue;
border-style:solid;
border-width:4px;



Example 3: It is possible not to specify all four sides of the border

border-right-color:yellow;
border-right-style:solid;
border-right-width:4px;


Types of border styles


The border-style property can be specified as:

 border-style:solid

 border-style:dotted

 border-style:dashed

 border-style:double

 border-style:groove

 border-style:ridge

 border-style:inset

 border-style:outset

 border-style:hidden






Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal