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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


The output would look like:

output




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.