Thorough explanation of 3 ways to draw dotted lines with CSS!

When creating a website, there are many scenes where dotted lines are reproduced with CSS, and dotted lines are often used in design.

There are many kinds of dotted lines, and it may not be possible to deal with them only by using the border property to reproduce dotted lines in CSS .

So, in this article, I will introduce three ways to draw dotted lines with CSS.

If you know the three methods I introduce, you will be more likely to reproduce any dotted line.

In the second half of the article, I will also introduce a design example using dotted lines, so please read to the end.

3 ways to draw a dotted line with CSS

There are three main ways to draw dotted lines in CSS.

There are differences in the dotted lines that can be represented by each property.

From here, we will introduce the description method and advantages for each property.

Since it is necessary to use different properties depending on the scene where the dotted line is drawn, it is necessary to understand how to draw a dotted line with each property.

First, copy and paste to see what kind of dotted line can be reproduced.

It is recommended that you actually read the article while coding, as it will speed up your understanding .

Now, I will introduce how to draw a dotted line with each CSS property and its merits.

Draw a dotted line with the border property

The border property is the most used way to draw a line in CSS.

The border property is a property for drawing a border on all four sides of a block element .

The border property normally draws a single line, but it can also be changed to a dotted line.

First, I will explain how to draw a dotted line with the border property using a code example.

CSS
.container{
  width: 200px;
}
.tensen{
  border-bottom: 2px dotted black;
}

In the code above, we specified the bottom of the border with the border-bottom property and specified a black line with a thickness of 2px.

Normally, I draw one line with solid, but I wrote dotted and changed it to a dotted line.

To reproduce a dotted line with the border property, simply enter dotted as the value .

The border property has values ​​for drawing various lines, as shown in the table below.

In addition, by combining top, bottom, left, and right with the border property, you can draw a line by specifying only one direction: up, down, left, or right.

Let’s draw a dotted line by specifying the border property only for the top and bottom.

.container{
  width: 200px;
}
.tensen{
  border-bottom: 2px dotted black;
  border-top: 2px dotted black;
}

The border property is also effective when drawing a dotted line in a part of the sentence.

underline part of the text

A span tag can be used to underline a section of text .

Since the underline can also be changed to a dotted line, here is a simple code example.

CSS
.container{
  width: 250px;
}
.ichibu{
  border-bottom: 3px dotted red;
}

By specifying the top, bottom, left, and right with the border property without specifying the bottom, you can also enclose a part of the text with a dotted line.

CSS
.container{
  width: 250px;
}
.ichibu{
  border: 3px dotted red;
}

Use the span tag to make a part stand out and use the border property to draw a line, so be sure to remember it.

Draw a dotted line with the background property

You can draw a dotted line by making full use of background properties.

First, let’s take a look at a code example using background properties.

HTML
    <div class="container">
        <p class="tensen">背景に点線を引く方法です。</p>
    </div>

CSS
.container{
  width: 200px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 5px); 
  background-size: 5px 3px;  
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

A dotted line can be drawn by combining image and size, position and repeat in the background property .

Details on how to draw a dotted line using the background property will be introduced later in the article.

Just copy and paste the above code and match the class name to draw a dotted line, so please learn while actually coding.

Draw a dotted line using pseudo-elements and the border property

By combining pseudo elements in addition to the border property, you can draw a dotted line anywhere.

Let’s start with a simple code example.

HTML
    <div class="container">
        <p class="tensen">擬似要素で点線を引く方法です。</p>
    </div>

CSS
.container{
  width: 250px;
}
.tensen {
    position: relative;
    text-align: center;
}
.tensen::after {
    border-bottom: 3px dotted rgb(255, 0, 0);
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}

The dashed line is drawn using the ::after pseudo-element.

::after is used to add text or decorations after the specified element.

The dotted line is drawn at border-bottom, but a feature of pseudo-elements is that the location and length of the dotted line can be freely determined .

In the code above, the width property determines the length of the dotted line, and the bottom, left, and transform properties determine where to draw the dotted line.

Pseudo-elements are a very important way to faithfully reproduce a design, so be sure to learn them.

border if you simply want to reproduce dotted lines with CSS

I introduced three ways to draw a dotted line, but if you just want to draw a dotted line, it ‘s easier to use the border property, which is recommended .

Depending on the design of the website, there are many situations where the border property is used.

Even changing the thickness of the line can greatly change the design of the dotted line.

Change the appearance of the dotted line by changing its thickness

When drawing a dotted line with the border property, the design can change greatly just by changing the thickness.

Compare 1px dotted line and 10px dotted line with the code below.


CS
.container{
  width: 250px;
}
.tensen {
  border-bottom: 1px red dotted;
}
.tensen2{
  border-bottom: 10px red dotted;
}

Just by changing the thickness of the line with the border property, the appearance changes greatly.

However, if you change the lineweight, you should understand that the overall width of the block element will change.

For example, if there is a div element with a width of 200px and a line width of 5px, the overall width will be 205px.

If the width of a block element changes, the width of the padding and the width of adjacent block elements must also change.

It should be set so that the width of the block element does not change even if the width of the line is specified.

The setting is to write the following code at the beginning of CSS.

CSS
*{
  box-sizing: border-box;
}

With the above description, changing the width of the line will not change the width of the block element.

When using reset CSS etc., it may already be set, so let’s check it.

Step-by-step explanation of how to adjust the spacing of dotted lines with CSS

If you draw a dotted line with the border property, you can change the thickness, but you cannot adjust the spacing between dots.

However, if you try to faithfully reproduce the design, there will be situations where you have to adjust the spacing between dots.

In such a case, the method using the background-image property is effective .

From here, I will explain in detail how to adjust the spacing of the dotted lines using the background-image property.

Use linear-gradient of background-image

You can change the interval between points by adjusting the value of linear-gradient in the background-image property introduced in the second method of drawing a dotted line .

First, let’s take a look at the code with the dotted line in the background-image property.

HTML
    <div class="container">
        <p class="tensen"</p>
    </div>
</body>

CSS
.container{
  width: 210px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 5px); 
  background-size: 5px 3px;  
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

We will break down and explain the meaning of each property and value.

linear-gradient is the value to set the gradient

linear-gradient is originally a value for setting a gradient.

This time, the dotted line is drawn using this characteristic.

There are various ways to set the gradation with liear-gradient, but this time we will introduce a method for adjusting the interval between dotted lines.

Create one point using linear-gradient in the above procedure.

Determine width and height with background-size

After reproducing one point with linear-gradient, specify the width and height of the points and intervals with background-size.

CSS
セレクタ{
background-size: 5px 3px;
}

The value before background-size is the width, so it must be the same as the last value specified in linear-gradint.

The code used this time is 5px.

The second value of background-size specifies the vertical width.

Specifies the vertical width of the point, so if you want a square point, it should be the same as the first px value specified in linear-gradient.

Anything higher than the first value will create vertical dots.

Spacing can be adjusted with linear-gradient and background-size

You can widen the gap by setting a wider range to be transparent with linaer-gradient and the width of background-size .

Conversely, if you want tighter spacing, you should decrease the value.

I will introduce the CSS when the dotted line expressed in the above code is expanded.

HTML
    <div class="container">
        <p class="tensen"></p>
    </div>

CSS
.container{
  width: 210px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 8px); 
  background-size: 8px 3px; 
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

By changing the size from 5px to 8px, you can see that the spacing has increased.

Practice adjusting the spacing between dots to match your design while actually coding.

Determine background position with background-position

background-position is the property that determines the position of the background.

This time, to draw a dotted line from the lower left of the text, write as follows.

CSS
セレクタ{
background-position: left bottom;
}

If you want to draw a dotted line horizontally from the top left, change bottom to top.

CSS
セレクタ{
background-position: left top;
}

Writing only left will draw a line in the center of the element.

Repeat points with background-repeat

A dotted line is created by repeatedly displaying one point and an interval represented by the linear-gradient of the background-image.

This time, we want to draw a horizontal dotted line, so we specify the x-axis.

CSS
{
background-repeat: repeat-x; 
}

With the above code, you can set the background-image to be repeated on the right side.

If you want to draw a dotted line vertically, use repeat-y .

Drawing a dotted line using background may seem difficult, but once you understand the meaning of each code, you will be able to express dotted lines freely.

One way is to use a dotted line image

If you want to draw a dotted line with CSS, using an image is one way.

Specify an image for background-image to express a dotted line.

HTML
    <div class="container">
        <p class="tensen"></p>
    </div>

CSS
.tensen{
  background-image: url(tensen.png);
  background-position: bottom;
  background-repeat: repeat-x;
  padding-bottom: 5px;
}

I specified the path of the dotted line image in background-image and made it appear repeatedly in the underline.

The advantage of using images to express dotted lines is that you can express dotted lines with various designs.

As long as you create an image, you can express any dotted line.

However, using images has disadvantages such as taking a long time to load, so please be careful to use them according to the design and instructions.

Make HTML hr dotted with CSS

Boundaries may be drawn between blocks or between sentences using the HTML hr tag.

The border using the hr tag can also be changed to a dotted line with CSS.

HTML
    <div class="container">
        <p></p>
        <hr>
        <p></p>
    </div>

CSS
hr{
  border-top: 5px dotted black;
  border-right: none;
  border-bottom: none;
  border-left: none;
}

Use border-top to express a dotted line only on the top side.

Unless the left, right, and bottom borders are set to none, a single line will be displayed, so only top or bottom must be specified.

The hr tag is used to separate blocks and sentences, so if you want to express softly with dotted lines, try using the above method.

Introducing design examples using CSS dotted lines

Finally, I will introduce a design example using dotted lines.

Dotted lines give the design a softer impression and give it a more stylish look, so it is important to understand the various ways of expression.

change brackets to dotted lines

This is a method to change square brackets to dotted lines when using square brackets for headings, etc.

HTML
    <div class="container">
        <p class="tensen">カギ括弧を点線にしてみました</p>
    </div>

CSS
.container{
  width: 300px;
}
.tensen{
  position: relative;
	padding: 25px;
}
.tensen::before, .tensen::after {
	content: '';
  position: absolute;
	width: 25px;
	height: 25px;
}
.tensen::before {
	border-left: dotted 2px #ff0000;
	border-top: dotted 2px #ff0000;
	top: 0;
	left: 0;
}
.tensen::after {
	border-right: dotted 2px #ff0000;
	border-bottom: dotted 2px #ff0000;
	bottom: 0;
	right: 0;
}

I used a pseudo-element to create brackets and changed the border property to dotted.

Draw a dotted line around the image

I will introduce a design that encloses the edge of the image with a dotted line.

This time, we will use CSS to create a dotted line around the image that has been cut into a circle.

HTML
    <div class="container">
        <img src="computer.jpg" alt="">
    </div>

CSS
.container{
  width: 200px;
  height: 200px;
  border: dotted 5px hotpink;
  border-radius: 50%;
  overflow: hidden;
}

Rather than just displaying an image, you can also make it stand out by just surrounding it with a dotted line.

Dotted lines like these are useful for expanding the range of expressions.

summary

This time, I mainly introduced the properties for drawing dotted lines with CSS and how to adjust the spacing between dotted lines.

Even changing borders and underlines to dotted lines can make it look a little more stylish.

There are three main ways to change borders and underlines to dotted lines.

Even if you understand each method, you will be able to draw dotted lines freely.

Understand that there are many ways to faithfully reproduce a design.