Border styles

We saw solid as a border style while seeing about Square and Rounded Borders. Now, I'll explain some other styles and how to define it.

1. .krish{
   border:3px dashed white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   This is an example of dashed border.
2. .krish{
   border:3px dotted white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   This is an example of dotted border.
3. .krish{
   border:3px double white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   This is an example of double border.
4. .krish{
   border:3px ridge white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   This is an example of ridge border.
5. .krish{
   border:3px groove white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   This is an example of groove border.
6. .krish{
   border:3px white;
   border-style:double dotted;
   }
   

   This is an example of double-dotted border.
7. .krish{
   border:3px white;
   border-style:double dashed dotted solid;
   }
   

   This is an example of double-dashed-dotted-solid border.

Explanations respectively :-

• #1 This kind of border is what we saw in prev. articles and example here. A thick line.
• #2 This kind of border is explained by its name itself. dotted
• #3 Again explained by name. Double.
• I don't know how #4 and #5 differ each other. Some one try to explain via comment.
• #6 Here, you see a new attribute "border-style." It goes this way.
  border-style:top&bottom left&right;
  You can define separate style for top & bottom side of the border and separate style for left and right sides of border
• #7 Here, the syntax goes as
  border-style:top bottom right left;
  Separate style for each side of border