CSS - Border

Borders can be applied within the body of HTML Document. It allows to specify the style & color of the border. 

1. Border Style
• none - Defines no borders
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines two borders outline with same width
• groove - Defines 3D groove border
• ridge - Defines 3D ridge border
• inset - Defines 3D inset border
• outset - Defines 3D outset border


2. Border Width
   border-width property is used to set values for the border width


3. Border Color
   border-color property used to set border color


4. Different side Borders
• Border-top
  Ex:
  border-top-style : dotted;


• Border-right
  Ex:
  border-right-color : red;


• Border-bottom
  Ex:
  border-bottom-style : dashed;


• Border-left
  Ex:
  border-left-width : 2; 


•  Border styles can be defines as follows
• border-style : none dotted solid dashes;
  + Top border is none
  + Right border is dotted
  + Bottom border is solid
  + Left border is dashed
• border-style : none dotted solid;
  + Top border is none
  + Both Right & Left borders are dotted
  + Bottom border is solid
• border-style : none dotted;
  + Top & Bottom borders are none
  + Right & Left borders are dotted
• border-style : dotted;
  + All borders are dotted

Ex:
p{
   border-bottom-style: dotted; 
   border-color: red; 
   border-left-style: solid;
   border-right-style: none;
   border-top-style: dashed; 
   border-width: 4;
}

This is a paragraph with border styles