📌 Introduction

The border-width property in CSS controls the thickness of an element’s border. It is part of the CSS border system, which includes border-style andborder-color. You can apply border-width to all sides at once or to individual sides for fully customized borders. Understanding border-width helps you design clean, structured, and visually balanced UI components. ✨

🎯 Why Use border-width?

✨ Syntax

selector {
  border-width: <length> | thin | medium | thick;
}

🧩 Ways to Use border-width

1. Single Value (All Sides)

.box {
  border-width: 4px;
}

2. Two Values

First applies to top & bottom, second to left & right.

.box {
  border-width: 5px 10px;
}

3. Three Values

Applies to: top | left+right | bottom

.box {
  border-width: 5px 10px 15px;
}

4. Four Values (Each Side)

/* top | right | bottom | left */
.box {
  border-width: 3px 6px 9px 12px;
}

🧩 Per-Side Border Width Properties

.box {
  border-top-width: 4px;
  border-right-width: 6px;
  border-bottom-width: 8px;
  border-left-width: 10px;
}

📐 Using border-width with border-style

Borders require a style to become visible. Without border-style, border-width has no visual effect.

.box {
  border-style: solid;
  border-width: 5px;
}

🔢 Predefined Keyword Values

🔥 Practical Examples

1. Card with Slim Border

.card {
  border: solid 1px #ccc;
  padding: 20px;
}

2. Button with Bold Border

button {
  border-width: 4px;
  border-style: solid;
  border-color: #007bff;
}

3. Border with Different Thickness per Side

.creative-box {
  border-style: solid;
  border-width: 2px 4px 6px 8px;
}

4. Responsive Border

.responsive {
  border-width: 1%;
  border-style: solid;
}

🖼️ Visual Demo

🎉 Conclusion

The border-width property gives you fine control over the thickness of element borders. Whether you want thin separators, bold outlines, or creative asymmetrical borders, this property helps you design visually appealing and structured UI components. Combine border-width with border-style and border-color for complete border customization. 🚀