Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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>


The output would look like:

output



Last Updated : 29 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads