Prev Next

CSS Outline Shorthand

Similar to borders, the outline can be defined using a shorthand property. outline can combine outline color, style, and width in one declaration, making the code cleaner and easier to maintain.

Key Topics

Shorthand Syntax

For example, outline: 2px dotted red; sets all three properties at once.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Outline Shorthand Example</title>
    <style>
        .shorthand {
            outline: 2px dotted red;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="shorthand">
        <h2>Dotted Red Outline</h2>
        <p>One property sets width, style, and color.</p>
    </div>
</body>
</html>

Explanation: The shorthand property makes your code concise and easier to adjust later.

Cleaner Code

Shorthand properties reduce repetition. Instead of writing three separate declarations, a single line handles all outline characteristics, making maintenance simpler.

Key Takeaways

  • Efficiency: Shorthand saves time and space in your code.
  • Simplicity: Quickly set outline width, style, and color in one go.
  • Maintainability: Fewer lines of code means easier future adjustments.
Prev Next