Sunday, May 27, 2012

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

No comments :

Post a Comment