CSS border-style Property

CSS border-style Property

The border-style property in CSS defines the style of an element’s border. It applies to all four sides of the border unless specified individually (border-top-style, border-right-style, etc.).

1. Syntax

selector {
  border-style: style;
}

✅ Can specify one, two, three, or four values for different sides.

Value Options:

Value	Description
none	No border (default)
solid	A single solid line
dotted	A series of dots
dashed	A series of dashes
double	Two solid lines
groove	A 3D grooved effect
ridge	A 3D ridged effect
inset	A 3D inset effect
outset	A 3D outset effect

2. Example – Basic Border Styles

.box1 { border-style: solid; }
.box2 { border-style: dotted; }
.box3 { border-style: dashed; }
.box4 { border-style: double; }
.box5 { border-style: groove; }

✅ Each element will have a different border style.

3. Example – Different Styles for Each Side

div {
  border-style: solid dashed dotted double;
}

✅ The border styles will be applied in this order:

• Top: solid

• Right: dashed

• Bottom: dotted

• Left: double

4. Example – Using Individual Properties

div {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
}

✅ Same as border-style: solid dashed dotted double; but written separately.

5. Removing Borders

div {
  border-style: none;
}

✅ Removes all borders.

6. Border-Style vs. Shorthand Border

Shorthand border-style	Shorthand border
Only sets style	Sets width, style, and color
border-style: solid;	border: 2px solid red;

✅ Use border for a full border definition in one line.

7. Best Practices

✔ Always use border-style with border-width to make the border visible.
✔ Use individual properties (border-top-style, etc.) for precise control.
✔ Use border-style: none; instead of 0px to remove borders.