How to add a border in CSS?

The border is a shorthand property in CSS, which is used to add a border on an element. It allows us to specify the border of the box. It sets the width, style, and color of the border. This CSS property includes the following border properties:

• border-width: The border-width property is used to set the border's width. We can also use the pre-defined values that are thin, medium, and thick to set the width of the border. It sets the thickness of the border. Its default value is medium.
  This property cannot be used alone. It is always used with other border properties like "border-style" property to set the border first; otherwise, it will not work.
  The width of the border can be different for every individual side. It can be done by using the border-bottom-width, border-top-width, border-right-width, and border-left-width.
• border-style: This property specifies the style of the border. It defines whether the border is solid, dotted, dashed, double, groove, and one of the other possible values. Without setting this property, i.e., without setting the border style, none of the other border properties will work. The border will be invisible without specifying the border-style. This is because the default value of this CSS property is none.
  Similar to border-width, the style of the border can be different for each individual side. It can be done using the properties border-bottom-style, border-top-style, border-right-style, and border-left-style.
• border-color: It allows us to change the color of the border. We can set the color by using the color name, RGB value, or hex value. Similar to the border-width and border-style, we can change the color of the border individually, i.e., we can change the color of the bottom, top, left, and right side of the border of an element. It can be done by using the properties border-bottom-color, border-top-color, border-right-color, and border-left-color.
  The border-color property cannot be used alone. It must be used with other border properties like "border-style" property to set the border; otherwise, it will not work.

border vs. outline

Although borders and outlines are very similar, there are some differences between outlines and borders that are as follows:

• Using an outline, we cannot apply different outline width, style, and color for the four sides of an element, whereas, in a border, we can apply the provided value for all four sides of an element.
• The border is a part of the element's dimension, whereas the outline is not the part of the element's dimension. Means, it doesn't matter how thick an outline we apply to the element, the dimensions of it won't change.

Let's see an example to understand the border property.

Example

Output

Now, there is another example in which we are using both outline and border properties.

Example

Output