Sunday, October 31, 2010

CSS Border

1:57 PM  Vasu  No comments

Common ways of specifying border properties in CSS include the following:
  • border-style

  • border-width

  • border-color

  • border-top-, border-left-, border-bottom-, border-right-

  • border

    border-style

    The border-style property defines the format of the border. The table below shows the possible values and how each one renders.

    CSS DeclarationOutput
    p {border-style:solid;}
    Solid Border
    p {border-style:dashed;}
    Dashed Border
    p {border-style:double;}
    Double Border
    p {border-style:dotted;}
    Dotted Border
    p {border-style:groove;}
    Groove Border
    p {border-style:ridge;}
    Ridge Border
    p {border-style:inset;}
    Inset Border
    p {border-style:outset;}
    Outset Border

    border-width

    The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.

    CSS DeclarationOutput
    p {border-width:9px; border-style:solid;}
    Border Width 9px
    p {border-width:medium; border-style:dashed;}
    Border Width Medium

    border-color

    The border-color property specifies the color of the border.
    Examples below:

    CSS DeclarationOutput
    p {border-color:#0000FF; border-style:solid;}
    Border Color Blue
    p {border-color:red; border-style:dotted;}
    Border Color Red

    border-top-, border-left-, border-bottom-, border-right-

    Directions (top, left, bottom, right) can be combined with style, width, and color to form a 3-part CSS command. For example, border-top-style specifies the style of the top border. Some examples below:

    CSS DeclarationOutput
    p {border-top-style:solid; border-bottom-style:dotted;}
    Sample 1
    p {border-top-style:solid; border-top-width:medium;}
    Sample 2
    p {border-left-style:solid; border-bottom-style:dashed;
    border-bottom-color:#00FF00;}
    Sample 3

    border

    If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using theborder property. In addition, all three border properties (border-style, border-width, and border-color) can be combined into a single line with the border command.
    For example, with the CSS declaration,

    p {
      border:#0000FF 5px solid;
    }

    The following HTML,

    <p>A single line declares all border properties.</p>

    yields the output below:
    A single line declares all border properties.

    • Dont Miss Another Post Connect With Us !

    Enter your email address:
    Posted in:

    0 comments:

    Post a Comment