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

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:
Horizontalbackground-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);background-size: 10px 3px;
background-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);background-size: 10px 3px;
Verticalbackground-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);background-size: 3px 10px;
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
CSS-Misc
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
Making a div vertically scrollable using CSS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript