CSS Border

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization

CSS Tutorial  >  Border

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


    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


    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


    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;

    Sample 3


    If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using the border 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.

    Next: CSS Padding

    Copyright © 2015   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact