Border

The border properties are used to format the border around elements.

Border-style

To make the border visible around an element, the border-style property has to be set to a value other than none, which is the default value.

Example:

h1 {
    border-style: dotted;
}

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge.

The border-style property has four sub properties that can also be used to target each border side’s style.

Example:

border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: ridge;
border-left-style: inset;

Border-width

The border-width property, which controls the width of borders, can be set with a unit of length or with one of the predefined values: thin, medium, or thick. The initial value is medium, which is typically rendered as 3 pixels.

Example:

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

h1 {
    border-style: dashed;
    border-width: 10px;
}

Border-color

Border-color sets the color of the border. CSS does not specify what the default border color should be, but most browsers render it black.

Example:

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

The Border Shorthand Property

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

Example:

p {
    border: 5px solid #00ff00;
}

Border-radius

The corners of the border can be rounded using the border-radius property or its four subproperties.

Example:

border-radius: 5px;