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: