Tag border-top-width

📏 CSS border-top-width: Controlling the Thickness of the Top Border

Borders give structure and emphasis to webpage elements, and controlling their thickness is essential for balanced, visually pleasing designs. The border-top-width property in CSS specifically lets you set the thickness (width) of the top border of an element.

🧾 What is border-top-width?

border-top-width defines how thick the top border line of an element should be. This property only affects the width — the style and color must be set separately or through shorthand.

🧬 Syntax

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

Values:

  • <length> — Any CSS length unit like px, em, rem, vw, e.g., 5px, 0.3em
  • Keywords:
    • thin (typically around 1px)
    • medium (default, usually 3-4px)
    • thick (typically around 5px or more)

🎯 Examples

1. Thin top border

.box {
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: black;
}

Creates a very thin black line at the top.

2. Thick top border with pixels

header {
  border-top-style: solid;
  border-top-width: 8px;
  border-top-color: #4CAF50;
}

Adds a thick green top border 8 pixels wide.

3. Medium border with rem units

section {
  border-top-style: dashed;
  border-top-width: 0.5rem;
  border-top-color: gray;
}

Applies a medium-width dashed gray border using scalable rem units.

🔍 How It Works

  • The border only appears if the border-top-style is set to a value other than none.
  • If you specify width but omit style, no border will display.
  • Can be combined with border-top-style and border-top-color or with the shorthand border-top.

🛠️ Tips for Usage

  • Use thin, medium, and thick for quick, semantic thickness settings.
  • Use precise units (px, em, rem) for detailed control and responsive designs.
  • Adjust the thickness to maintain visual hierarchy — thicker borders draw more attention.
  • Combine with animations or hover effects for dynamic UI elements.

✅ Browser Support

Fully supported across all major browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 8+

🔚 Conclusion

The CSS border-top-width property is your go-to for setting the thickness of the top border of elements. It helps you control how bold or subtle that top edge looks, playing a key role in your design’s overall balance.