How to Create a Dotted Border in CSS: Simple Guide

To create a dotted border in CSS, use the border-style: dotted; property on an element. You can also set the border width with border-width and color with border-color to customize the dotted border's appearance.

Syntax

The CSS property to create a dotted border is border-style with the value dotted. You usually combine it with border-width to set thickness and border-color to set the color.

• border-style: Defines the border pattern (dotted here).
• border-width: Sets how thick the border is.
• border-color: Sets the color of the border.

css

selector {
  border-style: dotted;
  border-width: 2px;
  border-color: black;
}

Example

This example shows a box with a black dotted border that is 3 pixels thick. The border appears as small dots around the box.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.box {
  width: 200px;
  height: 100px;
  border-style: dotted;
  border-width: 3px;
  border-color: black;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: #333;
}

Output

<div class="box">Dotted Border Box</div>

Common Pitfalls

Some common mistakes when creating dotted borders include:

• Not setting border-width, which can make the dots very thin or invisible.
• Using border-style: dotted without a border width or color, so the border does not show.
• Confusing dotted with dashed, which creates dashes instead of dots.

Here is an example of a wrong and right way:

css

/* Wrong: No border width or color, so no visible border */
.wrong {
  border-style: dotted;
}

/* Right: Set width and color for visible dotted border */
.right {
  border-style: dotted;
  border-width: 2px;
  border-color: blue;
}

Quick Reference

Summary tips for dotted borders:

• Use border-style: dotted; to get dots.
• Always set border-width to control dot size.
• Set border-color to make dots visible.
• Combine with other border properties for full control.

Key Takeaways

Use border-style: dotted; to create a dotted border in CSS.

Always specify border-width and border-color to make the dotted border visible.

Dotted borders show small dots, different from dashed borders which show dashes.

Without border width or color, the dotted border may not appear.

You can customize the dotted border thickness and color to fit your design.