How do you add a border to an element in CSS?

To add borders to elements in CSS, we can use the border property. This property allows us to define the border style, width, and color. Below is the basic syntax and examples for using the border property.

1. Basic Syntax

css
selector {
  border-style: solid; /* Defines the border style */
  border-width: 2px;   /* Defines the border width */
  border-color: blue;  /* Defines the border color */
}

2. Using Shorthand Properties

We can also use the shorthand property for border to set all border properties (style, width, and color) in one go:

css
selector {
  border: 2px solid blue;
}

3. Example

Suppose we want to add a border to a <div> element:

html
<div class="bordered-box">This is a box with a border</div>

css
.bordered-box {
  border: 3px solid red;
}

This code adds a 3-pixel-wide, red, solid border to the <div> element.

4. Different Border Styles

CSS provides various border styles, such as dotted, dashed, solid, and double. Choose different styles based on your needs.

5. Targeting Different Sides

If you need to set different borders for different sides of an element, you can use border-top, border-right, border-bottom, and border-left to set them individually:

css
selector {
  border-top: 2px dotted green;
  border-right: 2px solid blue;
  border-bottom: 4px dashed red;
  border-left: 3px double black;
}

By using the methods above, you can flexibly add and define border styles for HTML elements to achieve the desired visual effect.