The border around an HTML element is, by default, invisible. CSS can be used to make the border visible and customize its style, size and color.

The style of the border must be set before that the size and color can be applied. These can all be set in a single declaration, but let's first take a look at each individual declaration. The following border styles can be applied:

p { border-style: none; }

p { border-style: hidden; }

p { border-style: dotted; }

p { border-style: dashed; }

p { border-style: solid; }

p { border-style: double; }

p { border-style: inset; }

p { border-style: ridge; }

p { border-style: groove; }

There are four different values that can be used to set the width of each type of border:

p { border-style: solid; border-width: 1px; } /* Length Value Can Vary */

p { border-style: solid; border-width: thin; }

p { border-style: solid; border-width: medium; }

p { border-style: solid; border-width: thick; }

The default color for a border, when not otherwise specified, is black. The "border-color" property can be used to specify the color. There are three types of values that can be used:

p { border-style: solid; border-width: 1px; border-color: green; }

p { border-style: solid; border-width: 1px; border-color: #008000; }

p { border-style: solid; border-width: 1px; border-color: rgb(0, 128, 0); }

It is possible to set the style, width and/or color of specific sides of a border, instead of all four sides, by using one or more of the following properties:

border-top-color: value;
border-top-style: value;
border-top-width: value;
border-right-color: value;
border-right-style: value;
border-right-width: value;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;
border-left-color: value;
border-left-style: value;
border-left-width: value;


And last but not least, you can condense the style, width and color values into a single declaration in one or more of the following manners:

p { border: 1px solid #008000; }

p {
  border-top: 1px solid #0096C5;
  border-right: 1px solid #008000;
  border-bottom: 1px solid #FFA100;
  border-left: 1px solid #008000;
}

(Keep in mind that although all of our examples here only apply borders to the HTML paragraph element, borders are not at all limited to this HTML element.)