border-style

Sets the border line style: solid, dashed, dotted, and more.

Initial value: none
Inherited: No
Animatable: no
Applies to: all elements
JavaScript: element.style.borderStyle = "dashed"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.dropzone {
  border: 2px dashed #525252;
  border-radius: 12px;
}

Preview

Definition and usage

The border-style property picks the look of the border line. Without it, no border exists, because the default value is none.

You can choose solid lines (solid), dashed (dashed), dotted (dotted), and double (double) lines, plus the 3D styles groove, ridge, inset, and outset, rarely used today.

Styles can be set separately for each edge, with one to four values.

Syntax

border-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset;

Values

solid
A solid line.
dashed
A line made of dashes.
dotted
A line made of dots.
double
Two parallel lines.
groove
A line that looks carved in.
none
No border. The width is then treated as 0.

Value	Description
solid	A solid line.
dashed	A line made of dashes.
dotted	A line made of dots.
double	Two parallel lines.
groove	A line that looks carved in.
none	No border. The width is then treated as 0.

Values in practice

solid

A solid line.

.demo { border-style: solid; }

dashed

A line made of dashes.

.demo { border-style: dashed; }

dotted

A line made of dots.

.demo { border-style: dotted; }

double

Two parallel lines.

.demo { border-style: double; }

groove

A line that looks carved in.

.demo { border-style: groove; }

none

No border. The width is then treated as 0.

.demo { border-style: none; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

A dashed border is a clear signal for a file drop zone or an empty content area.
The groove, ridge, inset, and outset styles depend on the color and often look dated. For a sense of depth, box-shadow works better.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course