CSS border-top Property

CSS border-top Property

The border-top property in CSS is a shorthand property used to set the width, style, and color of the top border of an element in one line.

1. Syntax

selector {
  border-top: width style color;
}

✅ Each value is optional, but the style must be defined for the border to appear.

Shorthand Values:

Value	Description	Example
width	Specifies the thickness of the top border	2px, thin, thick, 10px
style	Defines the border appearance	solid, dashed, double, none
color	Specifies the border color	red, #00ff00, rgba(0,0,255,0.5)

2. Example – Setting a Solid Top Border

div {
  border-top: 5px solid blue;
}

✅ The top border will be 5px thick, solid, and blue.

3. Example – Using Different Styles

.box1 { border-top: 4px dotted red; }
.box2 { border-top: 6px dashed green; }
.box3 { border-top: 8px double blue; }
.box4 { border-top: 5px groove purple; }
.box5 { border-top: 5px inset gray; }

✅ Each box has a different top border style.

4. Example – Using Individual Properties

Instead of shorthand, you can use separate properties:

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

✅ This achieves the same effect as border-top: 5px solid red;.

5. Example – Removing the Top Border

div {
  border-top: none;
}

✅ The top border is removed.

6. Border-Top vs. Full Border

Shorthand border-top	Shorthand border
Only affects the top border	Affects all sides
border-top: 3px solid red;	border: 3px solid red;

✅ Use border-top when you only need a top border, and border when you need all sides.

7. Best Practices

✔ Always specify border-top-style, or the border won’t appear.
✔ Use shorthand border-top instead of separate properties for cleaner code.
✔ Set border-top: none; to remove the top border instead of 0px.