How to Increase the Space between Dotted Border Dots using CSS?

Last Updated : 16 Oct, 2024

In CSS, increasing the space between the dots in a dotted border means adjusting the distance between each dot that makes up the border. This can be done by modifying certain CSS properties, allowing developers to control the appearance and spacing for a more customized design.

Using linear-gradient, and background-size Properties

In this approach, the space between dots in a dotted border is controlled using multiple CSS properties. The standard border property creates a basic dotted line, while linear-gradient and background-size simulate dotted borders with customizable dot spacing and repetition for more flexibility.

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;

Example: Here we use linear-gradient with background-image for custom borders. Adjust the background-size property to control spacing between the dots effectively.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> increase the space between dotted border dots using CSS</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>
    <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>