Prev Next

CSS Border Color

The border-color property defines the color of the border. You can use any valid CSS color format (named colors, HEX, RGB, HSL) to match your site’s palette or contrast requirements. Thoughtful border colors can help elements blend into or stand out from the background.

Key Topics

Single Color

Most commonly, all sides share the same border color, set using border-color: red; or directly in the shorthand property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Border Color Example</title>
    <style>
        .color-box {
            border: 2px solid #FF5733;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="color-box">
        <h2>Colored Border Box</h2>
        <p>This box has a bright, reddish-orange border.</p>
    </div>
</body>
</html>

Explanation: A colored border can highlight key content and reflect your site’s color scheme.

Different Colors for Different Sides

Use border-top-color, border-right-color, border-bottom-color, and border-left-color to vary colors per side. This technique can create gradient-like effects or highlight one side of an element.

Key Takeaways

  • Color Choice: Match border colors to your site’s palette for visual harmony.
  • Highlighting: Use bold colors to draw attention to specific elements.
  • Versatility: Different colors on each side add creative flair and unique styling options.
Prev Next