How to increase the space between dotted border dots using CSS?

Last Updated : 29 Jul, 2020

The task is to increase space between the dotted border dots. you can just adjust the size with the background-size property, the proportion with the background-image property, and the proportion with the linear-gradient percentages. So, you can have several dotted borders using multiple backgrounds. In this example, we have a dotted line of 3px dots and 7px spacing.

Syntax:

This works for both horizontal and vertical borders:

Horizontal

background-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);
background-size: 10px 3px;
Vertical

background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
background-size: 3px 10px;

Let’s see the example, which works for both horizontal and vertical borders.

Example of increasing the space between the dots of dotted borders:

The file given below contains CSS property. This file saves with .css extension. For Ex:

style.css

<style> 
    div { 
        padding: 10px 50px; 
    } 
    h1 { 
        color: rgb(20, 117, 8); 
    } 
    .dotted { 
        border-top: 5px #000 dotted; 
    } 
    .dotted-gradient { 
        background-image:  
linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 10%); 
        background-position: top; 
        background-size: 10px 3px; 
        background-repeat: repeat-x; 
    } 
    .dotted-spaced { 
        background-image:  
linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%); 
        background-position: top; 
        background-size: 10px 3px; 
        background-repeat: repeat-x; 
    } 
    .left { 
        float: left; 
        padding: 40px 10px; 
        background-color: rgb(79, 189, 79); 
    } 
    .left.dotted { 
        border-left: 1px #000 dotted; 
        border-top: none; 
    } 
    .left.dotted-gradient { 
        background-image:  
linear-gradient(to bottom, #000 40%, rgba(255, 255, 255, 0) 10%); 
        background-position: left; 
        background-size: 3px 10px; 
        background-repeat: repeat-y; 
    } 
    .left.dotted-spaced { 
        background-image:  
linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%); 
        background-position: left; 
        background-size: 3px 10px; 
        background-repeat: repeat-y; 
    } 
</style> 

Below is the HTML file that is making use of the created external style sheet.

the link tag is used to link the external style sheet with the HTML webpage.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>GEEKSFORGEEKS</title> 
          <link rel="stylesheet" 
                type="text/css" 
                href="style.css"> 
    </head> 
    <body> 
        <h1>GEEKSFORGEEKS</h1>  
        <div>no border</div> 
        <div class='dotted'>dotted border</div> 
        <div class='dotted-gradient'> 
             dotted border with gradient</div> 
        <div class='dotted-spaced'> 
             dotted spaced border</div> 
        <div class='left'>no border</div> 
        <div class='dotted left'>dotted border</div> 
        <div class='dotted-gradient left'> 
             dotted border with gradient</div> 
        <div class='dotted-spaced left'> 
             dotted spaced border</div> 
    </body> 
</html> 

Complete Code:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>GEEKSFORGEEKS</title> 
        <style> 
            div { 
                padding: 10px 50px; 
            } 
            h1 { 
                color: rgb(20, 117, 8); 
            } 
            .dotted { 
                border-top: 5px #000 dotted; 
            } 
            .dotted-gradient { 
                background-image:  
linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 10%); 
                background-position: top; 
                background-size: 10px 3px; 
                background-repeat: repeat-x; 
            } 
            .dotted-spaced { 
                background-image:  
linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%); 
                background-position: top; 
                background-size: 10px 3px; 
                background-repeat: repeat-x; 
            } 
            .left { 
                float: left; 
                padding: 40px 10px; 
                background-color: rgb(79, 189, 79); 
            } 
            .left.dotted { 
                border-left: 1px #000 dotted; 
                border-top: none; 
            } 
            .left.dotted-gradient { 
                background-image:  
linear-gradient(to bottom, #000 40%, rgba(255, 255, 255, 0) 10%); 
                background-position: left; 
                background-size: 3px 10px; 
                background-repeat: repeat-y; 
            } 
            .left.dotted-spaced { 
                background-image:  
linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%); 
                background-position: left; 
                background-size: 3px 10px; 
                background-repeat: repeat-y; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GEEKSFORGEEKS</h1> 
        <div>no border</div> 
        <div class="dotted">dotted border</div> 
        <div class="dotted-gradient"> 
          dotted border with gradient</div> 
        <div class="dotted-spaced"> 
          dotted spaced border</div> 
        <div class="left">no border</div> 
        <div class="dotted left">dotted border</div> 
        <div class="dotted-gradient left"> 
          dotted border with gradient</div> 
        <div class="dotted-spaced left"> 
          dotted spaced border</div> 
    </body> 
</html> 