CSS border-top-style Property

CSS `border-top-style` Property

The border-top-style property in CSS is used to specify the style of the top border of an element. It controls the appearance of the border at the top edge of an element, such as whether it is solid, dashed, dotted, or another style.

1. Syntax

selector {
  border-top-style: value;
}

Value	Description
`solid`	The border is a solid line.
`dashed`	The border is a series of short, dashes.
`dotted`	The border is a series of dots.
`double`	The border is a double line (two solid lines with space in between).
`groove`	The border appears as though it is carved into the page, with a 3D effect.
`ridge`	The border appears as though it is coming out of the page, with a 3D effect.
`inset`	The border makes the element appear sunken.
`outset`	The border makes the element appear raised.
`none`	No border is displayed.
`hidden`	The border is hidden (the same as `none`, but for table elements).

2. Example – Using `border-top-style`

div {
  border-top-style: dashed;
  border-top-width: 3px;
  border-top-color: #333;
}

<div>
  This div has a dashed top border.
</div>

✅ The <div> will have a dashed border at the top, with a thickness of 3px and color #333.

3. Example – Using `solid`, `dotted`, and `double`

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

✅ The <div> will have a double top border with a 5px width.

4. Example – Using `none` or `hidden`

div {
  border-top-style: none;
}

<div>
  This div has no top border.
</div>

✅ The top border of the <div> will be removed because the style is set to none.

5. Example – Using `groove` and `ridge`

div {
  border-top-style: groove;
  border-top-width: 4px;
  border-top-color: #333;
}

✅ The <div> will have a grooved top border with a 4px width and a 3D carved effect.

6. Best Practices

✔ Use border-top-style when you need to customize the appearance of only the top border, without affecting the other borders.
✔ Combine border-top-style with border-top-width and border-top-color for full customization of the top border.
✔ When using none or hidden, the border will not be visible, so it helps remove unwanted borders, especially in table elements.

Souy Soeng

CSS border-top-style Property