CSS border-top-width Property

CSS border-top-width Property

The border-top-width property in CSS is used to set the thickness of the top border of an element. It specifically targets the top edge, allowing you to customize just the top border while leaving the other borders unaffected.

1. Syntax

selector {
  border-top-width: value;
}

Value	Description
length	Specifies the thickness of the top border (e.g., px, em, rem, %).
thin	Sets the border to a thin width (typically 1px, browser-dependent).
medium	Sets the border to a medium width (usually 3px).
thick	Sets the border to a thick width (usually 5px).
inherit	Inherits the top border width from the parent element.

2. Example – Setting the border-top-width

div {
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #333;
}

<div>
  This div has a solid top border with a width of 5px.
</div>

✅ The <div> will have a 5px thick border at the top, and no border will appear on the other sides.

3. Example – Using thin, medium, and thick

div {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: #333;
}

✅ The <div> will have a thick top border (usually 5px).

4. Example – Using Length Units

div {
  border-top-width: 10px;
  border-top-style: solid;
  border-top-color: #333;
}

✅ The <div> will have a 10px thick top border.

5. Example – Customizing the Top Border in a Shorthand

You can use the border shorthand property to set all borders at once, including the top border.

div {
  border: 2px solid #333;
}

• This applies a 2px solid border to all sides, including the top.

6. Best Practices

✔ Use border-top-width when you only want to modify the top border of an element while keeping the other borders unchanged.
✔ Combine border-top-width with border-top-style and border-top-color to create a fully customized top border.
✔ For responsive designs, you may want to use relative units like em or rem instead of px for scalability.