Borders

The CSS border is used to set the border on an element.
Border property allows setting Style, color and width of the border.

Every border has three parts:

its width, or thickness
its style, or appearance
It's color

Border property and its individual components:

border-width:

This property sets the width of the border.
Units to specify border widths are in pixels (px), ems (em), or percentages (%).
You can set the width for all sides or individually for each side (top, right, bottom, left).

Syntax:

/* Setting border width for all sides */
border-width: 2px;

/* Setting border width for individual sides */
border-top-width: 5px;
border-right-width: 1px;

border-style:

This property defines the style of the border, such as solid, dashed, dotted, double, etc.

Syntax:

/* Setting border style for all sides */
border-style: solid;

/* Setting border style for individual sides */
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: solid;

border-color:

This property sets the color of the border. You can specify the color using named colors, hexadecimal color codes, RGB values, or other color representations.

Syntax:

/* Setting border color for all sides */
border-color: red;

/* Setting border color for individual sides */
border-top-color: #00FF00;               /* Green */
border-right-color: rgb(255, 0, 0);      /* Red */
border-bottom-color: blue;
border-left-color: rgba(0, 0, 255, 0.5);   /* Semi-transparent blue */

Values to pass border-style

Value	Description
none	No border
hidden	A hidden border, same as ‘none’ except for table elements
dotted	A series of dots
dashes	A series of short dashes
solid	A single solid line
double	Two parallel lines with a small gap between them
groove	A border that appears to be carved into the page
ridge	A border that appears to be slightly raised above the page
inset	A border that appears embedded into the page
outset	A border that appears slightly raised out of the page

Example:

The following example shows border-style property with different values:

<!DOCTYPE html>
<html>
   <body> 
       <p style="border-style: none;">No border.</p>
       <p style="border-style: hidden;">Hidden border.</p>
       <p style="border-style: dotted;">Dotted border.</p>
       <p style="border-style: dashed;">Dashed border.</p>
       <p style="border-style: solid;">Solid border.</p>
       <p style="border-style: double;">Double border.</p>
       <p style="border-style: groove;">Groove border.</p> 
       <p style="border-style: ridge;">Ridge border.</p>
       <p style="border-style: inset;">Inset border.</p>
       <p style="border-style: outset;">Outset border.</p>
       <p style="border-style: none dashed solid dotted;">A mixed border.</p>
   </body>
 <html>

Output:

Difference Between Border and Outline

FEATURES	BORDER	OUTLINE
Definition	Defines the width, style, and color of the border around an element.	Draws a line around an element, outside the border edge.
Affects Layout	Yes, it takes up space and affects the element's layout.	No, it does not take up space or affect the layout.
Position	Positioned within the element's box model.	Positioned outside the element's border.
Individual Side Control	Yes, can control each side separately (e.g., `border-top`).	No, applies to all sides equally.
Offset Property	No	Yes, `outline-offset` to control distance from the border.
Properties	`border-width`, `border-style`, `border-color`, `border-radius`, `border-top`, `border-right`, `border-bottom`, `border-left`	`outline-width`, `outline-style`, `outline-color`, `outline-offset`
Shorthand Property	border	outline