Border Style

2:41:00 PM |

  • none
  • dotted: Defines a dotted border
  • dashed: Defines a dashed border
  • solid: Defines a solid border
  • double: Defines two borders. The width of the two borders are the same as the border-width value
  • groove: Defines a 3D grooved border. The effect depends on the border-color value
  • ridge: Defines a 3D ridged border. The effect depends on the border-color value
  • inset: Defines a 3D inset border. The effect depends on the border-color value
  • outset: Defines a 3D outset border. The effect depends on the border-color valueoutset: Defines a 3D outset border. The effect depends on the border-color value

Border Width

The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}


Border Color

The border-color property is used to set the color of the border. The color can be set by:
  • name - specify a color name, like "red"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}


Border - Individual sides

In CSS it is possible to specify different borders for different sides:

Example

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
The example above can also be set with a single property:

Example

border-style:dotted solid;
The border-style property can have from one to four values.
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and border-color.