Border Style

By the end of this lesson, you will be able to choose and apply CSS border-style values to create visible borders, and know when to use border-style separately or with the border shorthand.

What it is

border-style is a CSS property that controls the visual pattern of an element's border. It does not set the border's thickness or color; it only decides whether the border looks like a solid line, a dashed line, a dotted line, or another style. A border is made of three related parts: border-width, border-style, and border-color. If border-style is none or not set, the border will not be visible, even if width and color are present.

Common values include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. You can also set one side at a time with properties such as border-top-style, border-right-style, border-bottom-style, and border-left-style.

Why it matters

• It makes borders visible: without a style, a border usually does not appear.
• It communicates hierarchy: a solid border can mark a main container, while a dashed border can suggest a placeholder or editable area.
• It supports accessibility: different line patterns can help users distinguish sections without relying only on color.
• It keeps CSS organized: you can change only the pattern while leaving width and color separate.
• It enables per-side control: you can make one edge dotted and another solid.

Syntax or steps

The smallest useful pattern is to set border-style, then add width and color if needed:

selector {
  border-style: solid;
  border-width: 2px;
  border-color: #333;
}

You can also use the shorthand border, which combines width, style, and color:

selector {
  border: 2px solid #333;
}

For one side only:

selector {
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #0066cc;
}

Example

<style>
.card {
  border-style: solid;
  border-width: 2px;
  border-color: #333;
  padding: 12px;
  margin-bottom: 12px;
}

.note {
  border-style: dashed;
  border-width: 1px;
  border-color: #0066cc;
  padding: 12px;
}
</style>

<div class="card">This box has a solid border.</div>
<div class="note">This box has a dashed border.</div>

Part by part:

• .card uses border-style: solid, so the border is a continuous line.
• border-width: 2px makes the line thick enough to be clear.
• border-color: #333 sets a dark gray color.
• .note uses border-style: dashed, producing a broken line pattern.
• padding adds space inside the border so the text does not touch the edge.

Common mistakes

• Setting width or color but forgetting style. Fix: add border-style: solid or use border: 1px solid black.
• Putting width inside border-style. border-style: 1px solid is invalid; use border-style: solid and border-width: 1px, or the border shorthand.
• Using double with a very small width. A double border needs enough space to show two lines; increase border-width or use solid.
• Assuming dotted and dashed look identical everywhere. Their appearance can depend on border width, color, and browser rendering; test at the sizes you need.

When to use it

Use border-style when you want to change only the line pattern. Use the border shorthand when you want to set width, style, and color together.

Practice

Guided exercise: Create a paragraph with a 3-pixel solid red border. Expected CSS:

p {
  border-style: solid;
  border-width: 3px;
  border-color: red;
}

Challenge: Make a box with a solid top border and a dashed bottom border. Hint: use border-top-style and border-bottom-style.

Quick check

Question: Why might a border not appear even when border-width: 5px is set?

Answer: Because border-style is still none or missing, so the browser has no line pattern to draw.

Summary

border-style is the switch that makes a CSS border visible and defines its line pattern. It works best when you understand it as one part of the border system, alongside width and color. For quick complete borders, use the border shorthand; for targeted changes, use border-style or side-specific properties.