CSS border-style Property

What You’ll Learn

The border-style property defines how the border lines look on an element. It controls whether borders are solid, dashed, dotted, double, or one of several 3D-style effects.

Definition and Usage

The border-style CSS property defines the style of the border around an element. It controls the appearance of all four sides and is essential for adding visual structure and emphasis to boxes, cards, and layout components.

By choosing different border styles such as solid, dashed, or dotted, you can create a variety of effects for cards, form fields, callouts, and decorative UI elements.

📝 Syntax

The syntax for border-style is straightforward:

selector {
  border-style: <border-style>;
}

Basic Example

p {
  border-style: solid;
  border-width: 2px;
  border-color: #000;
}

The style value refers to the border line type, such as solid, dashed, or dotted.

Syntax Rules

• The initial value is none, which hides the border.
• One value applies to all four sides; up to four values target top, right, bottom, and left.
• Common values include solid, dashed, and dotted.
• 3D-style keywords include groove, ridge, inset, and outset.
• Pair with border-width and border-color, or use the border shorthand.

Default Value

The default value of border-style is none, meaning no border is displayed until you choose a visible style such as solid or dashed.

You can pass one to four values to style all sides at once or assign a different style to each edge.

💎 Property Values

The border-style property accepts standard CSS border style keywords.

One to Four Values

border-style follows the same shorthand pattern as margin and padding. One value styles every side; up to four values target top, right, bottom, and left in that order.

• One value — applies to all four sides.
• Two values — first value for top and bottom, second for right and left.
• Three values — top, right/left, bottom.
• Four values — top, right, bottom, left.

border-style vs Side Longhands vs border

Examples Gallery

Try border-style with solid, dashed, dotted, double, and four-value shorthand borders.

<style>
  .solid-border {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }
  .dashed-border {
    border-style: dashed;
    border-width: 2px;
    border-color: blue;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }
  .dotted-border {
    border-style: dotted;
    border-width: 2px;
    border-color: red;
    padding: 0.75rem 1rem;
  }
</style>

<h1>Different Border Styles</h1>
<div class="solid-border">Solid Border</div>
<div class="dashed-border">Dashed Border</div>
<div class="dotted-border">Dotted Border</div>

<style>
  .border-examples div {
    border-width: 2px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }
  .solid {
    border-style: solid;
    border-color: #3498db;
  }
  .dotted {
    border-style: dotted;
    border-color: #e74c3c;
  }
  .dashed {
    border-style: dashed;
    border-color: #2ecc71;
  }
  .double {
    border-style: double;
    border-width: 4px;
    border-color: #f39c12;
  }
</style>

<div class="border-examples">
  <div class="solid">Solid Border</div>
  <div class="dotted">Dotted Border</div>
  <div class="dashed">Dashed Border</div>
  <div class="double">Double Border</div>
</div>

.shorthand-box {
  border-style: solid dashed dotted double;
  border-width: 3px;
  border-color: #2563eb;
  padding: 1rem;
  max-width: 16rem;
}

.card {
  border-style: double;
  border-width: 6px;
  border-color: #334155;
  padding: 1rem;
  background: #fff;
  max-width: 16rem;
}

💡 Best Practices