Border of an element goes around the padding and content.

CSS Border Properties

The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image. The following section will describe you how to set the various properties defining the style (border-style), color (border-color), and thickness (border-width) of the border.

The border-width Property

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of CSS border-width property</title>
  <style type="text/css">
      p.one {
          border-style: solid;
          border-width: 5px;
      }
      p.two {
          border-style: solid;
          border-width: 5px 10px;
      }
      p.three {
          border-style: solid;
          border-width: 5px 10px 15px;
      }
      p.four {
          border-style: solid;
          border-width: medium 10px thick 15px;
      }
  </style>
</head>
<body>
  <p class="one"><strong>one-value syntax:</strong> the single value sets the width of all four border sides.</p>
  <p class="two"><strong>two-value syntax:</strong> the first value sets the width of the top and bottom border, while the second value sets the width of the right and left sides border.</p>
  <p class="three"><strong>three-value syntax:</strong> the first value sets the width of the top border, the second value sets the width of the right and left border, and the third value sets the width of the the bottom border.</p>
  <p class="four"><strong>four-value syntax:</strong> each value sets the width of the border individually in the order top, right, bottom, and left.</p>
  <p><strong>Note:</strong> You must declare the <code>border-style</code> property before the <code>border-width</code> property. An element must have borders before you can set the width of the border.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS border-width property</title>

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: 5px 10px;

}

p.three {

border-style: solid;

border-width: 5px 10px 15px;

}

p.four {

border-style: solid;

border-width: medium 10px thick 15px;

}

</style>

</head>

<body>

one-value syntax: the single value sets the width of all four border sides.

two-value syntax: the first value sets the width of the top and bottom border, while the second value sets the width of the right and left sides border.

three-value syntax: the first value sets the width of the top border, the second value sets the width of the right and left border, and the third value sets the width of the the bottom border.

four-value syntax: each value sets the width of the border individually in the order top, right, bottom, and left.

Note: You must declare the <code>border-style</code> property before the <code>border-width</code> property. An element must have borders before you can set the width of the border.

</body>

</html>

Note:If the value for the border-width property is missing or not specified, the default value (medium) of the border-width will be used instead.

The border-style Property

The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property may take one of the following values: none, hidden, dashed,dotted, double, groove, inset, outset, ridge and solid.

none: Defines no border

hidden: Defines hidden border.

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 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 value

p {
    border-style: dotted;
}

p {

border-style: dotted;

}

The border-color Property

The border-color property specify the color of a box’s border. This is also a shorthand property for setting the color of all the four sides of an element’s border.

p {
    border-style: solid;
    border-color: #ff0000;
}

p {

border-style: solid;

border-color: #ff0000;

}

Note:The border-color property does not work if it is used alone. Use theborder-style property to set the border first.

The border Shorthand Property

The border CSS property is a shorthand property for setting one or more of the individual border properties border-style, border-width and border-color in a single rule.

p {
    border: 5px solid #ff4500;
}

p {

border: 5px solid #ff4500;

}

If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

Note:If the value for the border-color property is missing or not specified when setting the borders for an element (e.g. border:5px solid;) the element’s colorÂ property will be used as the value for the border-color.

In this example, the border will be a solid black line of 5px width:

p {
    color: black;
    border: 5px solid;
}

p {

color: black;

border: 5px solid;

}

But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for border-style property is none.

In the example below, there will be no border:

p {
    border: 5px #00ff00;
}

p {

border: 5px #00ff00;

}