CSS border

Purpose: The border property controls the appearance of a border around an element. It can be used to specify the width, style, and color of the border.
Syntax: element { border: width style color; }
- width: Sets the width of the border (e.g., 1px, 2px, 5px, medium, thick).
- style: Sets the style of the border (e.g., solid, dashed, dotted, double, groove, ridge, inset, outset).
- color: Sets the border color (e.g., red, blue, black, #FF0000).
Example:

div {
border: 2px solid red; 
}

This will create a 2-pixel-wide red solid border around all <div> elements.

CSS Outline

Purpose: The outline property adds an outline around an element. Unlike a border, an outline does not take up space within the element’s box.
Syntax: element {outline: width style color;}
- width: Sets the width of the outline.
- style: Sets the outline style (e.g., solid, dashed, dotted, double, groove, ridge, inset, outset).
- color: Sets the color of the outline.
Example:

button {
outline: 2px solid blue; 
}

This will create a 2-pixel-wide blue outline around all <button> elements.

Space: A border takes up space within the element’s box, affecting its width and height. An outline does not.
Appearance: Borders are drawn inside the element’s box, while outlines are drawn on top of the element.