How to add border in CSS

To add a border in CSS, you can use the border property. This property allows you to set the width, style, and color of the border around an element. Here’s the general syntax:

selector {
  border: width style color;
}

Example:

div {
  border: 2px solid black;
}

This will add a 2-pixel solid black border around the <div> element.

You can customize the border in different ways:

1. Width: You can set the border thickness (e.g., 1px, 2px, 5px, etc.).
2. Style: Specifies the style of the border (e.g., solid, dashed, dotted, double, none, etc.).
3. Color: Defines the color of the border (e.g., black, red, #FF5733, rgb(255, 0, 0), etc.).

Examples of different styles:

/* Solid border */
div {
  border: 2px solid black;
}

/* Dashed border */
div {
  border: 2px dashed red;
}

/* Dotted border */
div {
  border: 2px dotted blue;
}

/* Double border */
div {
  border: 4px double green;
}

Border on individual sides:

You can also apply borders to specific sides of an element using the following properties:

/* Top border */
div {
  border-top: 2px solid black;
}

/* Right border */
div {
  border-right: 2px solid black;
}

/* Bottom border */
div {
  border-bottom: 2px solid black;
}

/* Left border */
div {
  border-left: 2px solid black;
}

This way, you can have different borders on different sides of an element!