CSS Borders, Width, Style, Color with Examples

Border Overview-tutorial

The CSS border property is used to define a border around HTML elements. It includes settings for:

Width (thickness)

Style (appearance)

Color (visual tone)

Borders are essential for improving layout clarity, visual grouping, and overall design aesthetics.

Border Components

1. border-width

Defines the thickness of the border.

/* Apply same width to all sides */
border-width: 2px;

/* Different width for each side */
border-top-width: 5px;
border-right-width: 1px;

2. border-style

Specifies the type of line used in the border.

border-style: solid; /* Applies to all sides */
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: groove;

3. border-color

Sets the color of the border. You can use named colors, HEX, RGB or RGBA formats.

border-color: red;
border-top-color: #00FF00;
border-right-color: rgb(255, 0, 0);
border-left-color: rgba(0, 0, 255, 0.5);

Border Style Values

Value	Description
none	No border
hidden	Same as none (used for table elements)
dotted	A series of dots
dashed	Short dashes
solid	A solid line
double	Two solid lines with a gap
groove	Carved look
ridge	Raised border
inset	Appears embedded
outset	Appears raised outward

Example: All Border Styles

<!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;">Mixed border.</p>
  </body>
</html>

Output:

Comparison Between Border and Outline

Feature	Border	Outline
Definition	Affects the elements box itself	Draws a line outside the element
Affects Layout	Yes	No
Position	Inside the box model	Outside the box model
Control Sides	Yes (top, right, bottom, left)	No (applies to all sides only)
Offset	No	Yes (outline-offset)
Shorthand	border	outline