📌 Introduction

The border property in CSS is a powerful shorthand that lets you define an element’s border-width, border-style, andborder-color in a single line. It is one of the most commonly used CSS properties to create outlines, boxes, cards, buttons, inputs, layouts, and more. Using the border shorthand keeps your CSS cleaner and easier to maintain. ✨

🎯 What Can the border Shorthand Set?

✨ Syntax

selector {
  border: <border-width> <border-style> <border-color>;
}

🧩 Examples of border Shorthand

1. Basic Border

.box {
  border: 2px solid #333;
}

2. Border With Named Colors

.box {
  border: 3px dashed red;
}

3. Using RGB/RGBA

.box {
  border: 4px solid rgba(0, 0, 0, 0.4);
}

4. Only One Value (border-style only)

You can set only the style and use default width/color.

.box {
  border: dashed;
}

5. Multiple Sides Using border-top, border-right, etc.

.box {
  border-top: 4px solid red;
  border-right: 4px dashed blue;
  border-bottom: 4px dotted green;
  border-left: 4px double purple;
}

🧩 Border Shorthand Variants

1. border-width, border-style, border-color

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #000;
}

2. border-top, border-right, etc.

.box {
  border-top: 5px solid #f00;
  border-bottom: 5px solid #00f;
}

3. border-block / border-inline (Logical Properties)

These properties respect writing modes and directions (useful for international websites).

.box {
  border-block: 4px solid #333;   /* top & bottom in writing mode */
  border-inline: 2px solid #777; /* left & right in writing mode */
}

4. border-radius (Not part of border shorthand)

border-radius must be set separately. Border shorthand does not include radius.

🔥 Practical Examples

1. Card Component

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

2. Button With Bold Border

button {
  border: 3px solid #007bff;
  padding: 10px 20px;
  border-radius: 6px;
}

3. Multicolor Border

.multi {
  border-style: solid;
  border-width: 4px;
  border-color: red green blue yellow;
}

4. Image With Border

img {
  border: 5px solid #444;
  border-radius: 10px;
}

📊 Summary Table

🖼️ Visual Demo

🎉 Conclusion

The border shorthand is one of the most convenient tools in CSS, letting you quickly style borders with clean syntax. Understanding how width, style, and color interact opens up endless possibilities for clean, modern UI components. Use the border shorthand for simplicity and maintainability — and combine it withborder-radius for beautiful rounded designs. 🚀