CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

1. Border Style

The border-style property specifies what kind of border to display.

• dotted: Defines a dotted border.
• dashed: Defines a dashed border.
• solid: Defines a solid border.
• double: Defines a double border.
• none: Defines no border.
• hidden: Defines a hidden border.

2. Border Width

The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

3. Border Color

The border-color property is used to set the color of the four borders.

4. Individual Sides

You can specify the border for just one side.

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

5. Shorthand Property

To shorten the code, it is possible to specify all the border properties in one property. The border property is a shorthand property for the following individual border properties:

• border-width
• border-style (required)
• border-color

p {
  border: 5px solid red;
}