Prev Next

CSS Border Width

The border-width property specifies the thickness of the border. You can use keywords (thin, medium, thick) or set a custom width in units like px, em, or rem. Adjusting border width helps you control emphasis and hierarchy on your page.

Key Topics

Setting Border Width

Use border-width in combination with a border style and color. For example, border: 5px solid #333; or border-width: 5px; with separate declarations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Width Example</title>
    <style>
        .box {
            border-style: solid;
            border-color: #333;
            border-width: 5px;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Thick Border Box</h2>
        <p>This box has a thick, 5px border, making it more prominent.</p>
    </div>
</body>
</html>

Explanation: Increasing the border width draws more attention to the element. Use this sparingly to highlight important sections.

Responsive Width

Using relative units like em or rem can make borders scale with text size, supporting responsive design. For example, border-width: 0.2em; adjusts dynamically if the font size changes.

Key Takeaways

  • Variability: Choose from thin to thick borders to suit your design needs.
  • Units: Pixels, em, rem, or keywords (thin, medium, thick) give flexibility.
  • Emphasis: Thicker borders draw more attention to the element.
Prev Next