How do you add a border to an element in CSS | HTML | CSS | JAVASCRIPT

QUESTION : How do you add a border to an element in CSS?
ANSWER : In CSS, you can add a border to an element using the border property. The border property allows you to specify the width, style, and color of the border surrounding an element. Here's the basic syntax:
selector {
border: [border-width] [border-style] [border-color];
}
You can set each of the following values:

border-width: Specifies the width of the border. You can use values like thin, medium, thick, or specific length values such as 1px, 2px, etc.

border-style: Specifies the style of the border, such as solid, dashed, dotted, double, groove, ridge, inset, or outset.

border-color: Specifies the color of the border. You can use color names, hex codes, RGB, RGBA, HSL, HSLA values, or transparent.

Here are some examples:

css
Copy code
/* Border with 1px width, solid style, and black color */
.element {
border: 1px solid black;
}

/* Border with 2px width, dashed style, and red color */
.element {
border: 2px dashed red;
}

/* Border with thin width, dotted style, and blue color */
.element {
border: thin dotted blue;
}
Additionally, you can set the border individually using border-width, border-style, and border-color properties:

css
Copy code
/* Individual border properties */
.element {
border-width: 2px;
border-style: dashed;
border-color: red;
}
This allows for more precise control over each aspect of the border. You can also apply different borders to each side of an element using border-top, border-right, border-bottom, and border-left properties.