Skip to content
Related Articles

Related Articles

Improve Article

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>

The output would look like:

output




My Personal Notes arrow_drop_up
Recommended Articles
Page :