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.
This works for both horizontal and vertical borders:
background-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);
background-size: 10px 3px;
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:
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.
The output would look like: