Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Increase the Space Between the Dots of Dotted Borders?
The border shorthand CSS property defines the border of an element. It specifies the border-width, border-style, and border-color values.
The border-color property determines the colour of a border.
The border-style property specifies the style of the border.
The border-width property determines the width of a border.
The border-style CSS property defines the line style for an element's border on all four sides. It is a shorthand for the properties: border-bottom-style, border-left-style, border-right-style, and border-top-style. It lets us choose from the following border styles: none, solid, dotted, dashed, double, groove, ridge, inset, outset, and hidden.
When the value of border-style is set to dotted, it specifies a dotted border. Its default behavior can be seen in the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Default appearance of a dotted border</title>
<style>
div{
width:200px;
height:50px;
padding:2px;
border: 3px dotted darkslategray;
}
</style>
</head>
<body>
<div>
Div element with a dotted border
</div>
</html>
We can, however, increase the space between the dots of a dotted border by using CSS properties that work on both horizontal and vertical borders.
Using background-size and background-image Properties
The background-size property specifies the dimensions of the background image To fit the available space, the image can be left at its original size, stretched, or constrained. There are five options: auto, length, percentages, cover, and contain. Following is the syntax
background-size: auto|length|percentage|cover|contain;
Where,
Auto resizes the background image to its original size. It is the default setting.
Length specifies the background image's height and width. If only one value is specified, the second value is set to "auto”. Negative values are not permitted.
Percentage specifies the height and width of the background image in percentages. Negative values are also invalid in this case.
Cover enlarges the image as much as possible without stretching it. If the image's proportions differ from the element's, it is cropped vertically or horizontally so that no space remains.
Contain resizes the background image to make it more visible.
The background-image property specifies one or more background images for elements. One or more images can be used. By default, a background-image is vertically and horizontally repeated and placed in the top-left corner of the element. The background of an element is its total size, including padding and border (not margin). If the image is not available, we must specify a background-color. Followinbg is the syntax –
background-image: url|none;
This property's url() value allows us to include a file path to any image. It will display the background of the element. For the background, we can use multiple images or a combination of gradients and images.
Example
In this example, we will see how to add space between the dots of a dotted border. We can accomplish this by using the CSS background-size and background-image properties to change the size and proportion. As a result, we can have several dotted borders with different backgrounds.
We use <div> elements with class attributes and style them with the background-image, background-position, background-size, and background-repeat properties. This example works well for both horizontal and vertical borders.
<!DOCTYPE html>
<html>
<head>
<title>How to Increase the Space Between the Dots of Dotted Borders?</title>
<style>
div {
padding: 10px 50px;
}
h2 {
color: mediumvioletred;
}
.dotted {
border-top: 4px #000 dotted;
}
.dotted-gradient {
background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 10%);
background-position: top;
background-size: 8px 2px;
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: 9px 2px;
background-repeat: repeat-x;
}
.left {
float: left;
padding: 40px 10px;
background-color: bisque;
}
.left.dotted {
border-left: 2px #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: 2px 8px;
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 8px;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>Increasing space between dots of dotted borders.</h2>
<div>no border</div>
<div class="dotted">simple dotted border</div>
<div class="dotted-gradient">
dotted border with gradient</div>
<div class="dotted-spaced">
spaced out dotted border</div>
<br>
<div class="left">no border</div>
<div class="dotted left">simple dotted border</div>
<div class="dotted-gradient left">
dotted border with gradient</div>
<div class="dotted-spaced left">
spaced out dotted border</div>
</body>
</html>
2K+ Views
To Continue Learning Please Login