Article Categories

Selected Reading

How to Increase the Space Between the Dots of Dotted Borders?

HTML Web Development Front End Technology

The border shorthand CSS property defines the border of an element. It specifies the border-width, border-style, and border-color values. When using border-style: dotted, the default spacing between dots is controlled by the browser and cannot be directly modified using standard border properties.

However, we can create custom dotted borders with increased spacing between dots using CSS background properties. This technique gives us complete control over dot size, spacing, and appearance.

Default Dotted Border Behavior

The standard border-style: dotted creates evenly spaced dots with fixed spacing determined by the browser. Let's see the default appearance

Example

<!DOCTYPE html>
<html>
<head>
   <title>Default Dotted Border</title>
   <style>
      .default-dotted {
         width: 300px;
         height: 80px;
         padding: 15px;
         border: 4px dotted #333;
         background-color: #f9f9f9;
         text-align: center;
         line-height: 50px;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="default-dotted">
      Default Dotted Border
   </div>
</body>
</html>

The output shows a standard dotted border with browser-controlled spacing

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?                                                 ?
?              Default Dotted Border              ?
?                                                 ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Using Background Properties for Custom Spacing

To increase the space between dots, we use CSS background properties instead of the border property. This method creates dotted patterns using linear gradients that we can fully customize.

Syntax

The key properties for creating custom dotted borders are

background-image: linear-gradient(to right, color percentage, transparent percentage);
background-size: width height;
background-repeat: repeat-x | repeat-y;
background-position: position;

Where

linear-gradient creates the dot pattern using color stops
background-size controls dot size and spacing
background-repeat repeats the pattern along the border
background-position positions the border (top, bottom, left, right)

Method 1: Horizontal Dotted Border with Custom Spacing

For horizontal borders (top/bottom), we use linear-gradient(to right, ...) with background-repeat: repeat-x.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Custom Horizontal Dotted Borders</title>
   <style>
      .container {
         width: 400px;
         margin: 20px 0;
         padding: 20px;
         background-color: #f5f5f5;
      }
      
      .normal-spacing {
         background-image: linear-gradient(to right, #e74c3c 40%, transparent 40%);
         background-position: top;
         background-size: 10px 3px;
         background-repeat: repeat-x;
      }
      
      .wide-spacing {
         background-image: linear-gradient(to right, #e74c3c 25%, transparent 25%);
         background-position: top;
         background-size: 20px 4px;
         background-repeat: repeat-x;
      }
      
      .extra-wide-spacing {
         background-image: linear-gradient(to right, #e74c3c 15%, transparent 15%);
         background-position: top;
         background-size: 30px 5px;
         background-repeat: repeat-x;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="container normal-spacing">
      Normal Spacing (10px intervals)
   </div>
   
   <div class="container wide-spacing">
      Wide Spacing (20px intervals)
   </div>
   
   <div class="container extra-wide-spacing">
      Extra Wide Spacing (30px intervals)
   </div>
</body>
</html>

The output shows three different spacing levels

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
Normal Spacing (10px intervals)

?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?
Wide Spacing (20px intervals)

?     ?     ?     ?     ?     ?     ?     ?     ?     ?
Extra Wide Spacing (30px intervals)

Method 2: Vertical Dotted Border with Custom Spacing

For vertical borders (left/right), we use linear-gradient(to bottom, ...) with background-repeat: repeat-y.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Custom Vertical Dotted Borders</title>
   <style>
      .vertical-container {
         display: inline-block;
         width: 120px;
         height: 150px;
         margin: 0 20px;
         padding: 20px;
         background-color: #ecf0f1;
         text-align: center;
         vertical-align: top;
      }
      
      .vertical-normal {
         background-image: linear-gradient(to bottom, #3498db 35%, transparent 35%);
         background-position: left;
         background-size: 3px 12px;
         background-repeat: repeat-y;
      }
      
      .vertical-wide {
         background-image: linear-gradient(to bottom, #3498db 20%, transparent 20%);
         background-position: left;
         background-size: 4px 25px;
         background-repeat: repeat-y;
      }
      
      .vertical-extra-wide {
         background-image: linear-gradient(to bottom, #3498db 15%, transparent 15%);
         background-position: left;
         background-size: 5px 40px;
         background-repeat: repeat-y;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="vertical-container vertical-normal">
      Normal<br>Vertical<br>Spacing
   </div>
   
   <div class="vertical-container vertical-wide">
      Wide<br>Vertical<br>Spacing
   </div>
   
   <div class="vertical-container vertical-extra-wide">
      Extra Wide<br>Vertical<br>Spacing
   </div>
</body>
</html>

Method 3: Complete Border with All Sides

To create dotted borders on all sides with custom spacing, we can combine multiple background layers using comma-separated values.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Complete Custom Dotted Border</title>
   <style>
      .complete-border {
         width: 300px;
         height: 120px;
         margin: 30px;
         padding: 25px;
         background-color: #fff3cd;
         text-align: center;
         line-height: 120px;
         
         background-image: 
            linear-gradient(to right, #fd7e14 30%, transparent 30%),
            linear-gradient(to right, #fd7e14 30%, transparent 30%),
            linear-gradient(to bottom, #fd7e14 30%, transparent 30%),
            linear-gradient(to bottom, #fd7e14 30%, transparent 30%);
         
         background-position: 
            top left,
            bottom left,
            top left,
            top right;
         
         background-size: 
            15px 4px,
            15px 4px,
            4px 15px,
            4px 15px;
         
         background-repeat: 
            repeat-x,
            repeat-x,
            repeat-y,
            repeat-y;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="complete-border">
      Complete Custom Dotted Border
   </div>
</body>
</html>

Controlling Dot Size and Spacing

The spacing between dots is controlled by adjusting two key values

Property	Effect on Spacing	Example Values
`background-size`	Larger size = wider spacing between dots	`10px 3px` (closer), `20px 4px` (wider)
Gradient percentage	Lower percentage = smaller dots, more spacing	`40%` (larger dots), `20%` (smaller dots)
`background-position`	Controls which edge gets the border	`top`, `bottom`, `left`, `right`

Example Fine-tuning Dot Spacing

<!DOCTYPE html>
<html>
<head>
   <title>Fine-tuning Dot Spacing</title>
   <style>
      .spacing-demo {
         width: 350px;
         margin: 15px 0;
         padding: 15px;
         background-color:

Eesha Gandhi

Updated on: 2026-03-16T21:38:54+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next