Chapter 5: Border styles

Table of Contents

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