CSS Border Width Property with Examples

Border Width

The border-width property in CSS is used to define the thickness of an elements border. You can apply the same width to all sides or set individual widths for top, right, bottom, and left borders.

Syntax:

selector {
  border-width: value;
}

You can use:

Predefined values: thin, medium, thick

Specific lengths: e.g., 5px, 2em, 1rem

Multiple values for each side (top, right, bottom, left)

Example: Different Border Widths

<!DOCTYPE html>
<html>
<body>
  <h2>border-width with different values</h2>
  <p style="border-style: double; border-width: thin;">Thin width.</p>
  <p style="border-style: dashed; border-width: medium;">Medium width.</p>
  <p style="border-style: solid; border-width: thick;">Thick width.</p>
  <p style="border-style: dotted; border-width: 5px;">Specific length width border.</p>
  <p style="border-style: solid; border-width: 2px 4px 5px 10px;">Mixed length width border.</p>
</body>
</html>

Explanation:

2px 4px 5px 10px = top right bottom left (clockwise order)

Output:

Border Width on Individual Sides

You can target each side using:

border-top-width

border-right-width

border-bottom-width

border-left-width

Example: Single Side Border Widths

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      border-style: solid;
      padding: 2em;
      border-top-width: thin;
      border-right-width: thick;
      border-bottom-width: medium;
      border-left-width: 10px;
    }
  </style>
</head>
<body>
  <h2>border-width (single-side)</h2>
  <p>Welcome to Quipoin.</p>
</body>
</html>

Output:

Key Point

thin, medium, and thick are browser-defined keywords.

Numeric values like px, em, or % provide more control.

Use multiple values for shorthand or specify individually for precise styling.