Prev Next

CSS Border Shorthand

The border shorthand property combines width, style, and color into a single declaration. This keeps your CSS concise and easy to read. For instance, border: 2px solid #000; sets all three at once.

Key Topics

Simplifying Your Code

Instead of writing three separate properties, you can write one. For example, border: 2px dotted blue; sets a 2px dotted blue border on all sides.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Border Shorthand Example</title>
    <style>
        .box {
            border: 3px dashed green;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Dashed Green Border</h2>
        <p>With one line, we set the border width, style, and color.</p>
    </div>
</body>
</html>

Explanation: The shorthand makes it quick to define borders. Adjusting a single property changes the entire border configuration.

Modifying Individual Sides

If you need different styles for each side, you can still use properties like border-bottom separately. Shorthand is best when all sides share the same appearance.

Key Takeaways

  • Efficiency: Shorthand saves time and reduces code clutter.
  • Simplicity: One property sets width, style, and color at once.
  • Flexibility: Use shorthand for uniform borders, and individual properties for unique sides.
Prev Next