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:
- How to Increase the Development Speed With Snippets in Visual Studio Code?
- Space between two rows in a table using CSS?
- How to set vertical space between the list of items using CSS ?
- Remove border from IFrame using CSS
- How to draw a circle with gradient border using CSS ?
- How to Create Border Animation using CSS ?
- How to create a button with stitched border using HTML and CSS?
- How to add space (" ") after an element using :after selector in CSS ?
- How to make a div fill a remaining horizontal space using CSS?
- CSS | border-top-width Property
- CSS | border-inline-start-style Property
- CSS | border radius property
- CSS | border-top-right-radius Property
- CSS | border-width Property
- CSS | Border Images
- CSS border Property
- CSS | border-left-color Property
- CSS | border-right-color Property
- CSS | border-left-width Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.