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