How to make dotted and dashed borders in CSS

  John Mwaniki /    Updated on 07 Jul 2024

In web design, borders are lines that can be added along the edges of HTML elements. They are an essential part of web design, where they help to divide content, highlight areas, and add visual interest to a page.

They can be added to any HTML element such as images, divs, tables, paragraphs, and buttons among many others.

While solid borders are the most commonly used, there exist many other border styles in CSS, which can provide unique and stylish looks.

In this article, we will cover CSS borders with the most emphasis on dotted and dashed borders in CSS.

Creating Borders in CSS

For the purpose of demonstration, we will create a div element with a class "txtdiv" which we will then use CSS for borders.

<div class="txtdiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

In CSS, there exist many properties for creating and designing the border such as its color, width, and style among other things.

Among all the properties, border-style is the compulsory one whereas all the others are optional depending on how you want to customize your borders. Its property values include "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", and "hidden".

If you don't specify the border width and color, the resulting border will be 3px in width and black in color by default as shown below.

.txtdiv{
  border-style: solid;
}

Use the border or border-width properties to specify the width of the border, and the border-color property to specify its color.

Alongside the border styling, I will add padding so as to create some space around the text on all sides though this is not part of the border.

.txtdiv{
  padding: 10px;
  border: 1px; /* or  border-width: 1px;*/
  border-style: solid;
  border-color: green;
}

Alternatively, there is even a shorter way of doing it where you combine the values for the border width, style, and color in the same border property instead using multiple properties.

.txtdiv{
  padding: 10px;
  border: 1px solid green;
}

Note that you can use the color hex codes instead of the color names.

Creating Dotted Borders

Dotted borders are created by using the border-style property and setting its value to dotted. Below is an example:

.txtdiv{
  padding: 10px;
  border: 1px dotted green;
}

As you can see above, it creates a 1-pixel dotted border that is green in color. You can change its width, color, and other properties as needed.

If you want to control the distance between the dots, just use the border-spacing property:

.txtdiv{
  padding: 10px;
  border: 1px dotted green;
  border-spacing: 0.5em;
}

This will create a 1-pixel dotted border with 0.5em spacing between the dots.

Creating Dashed Borders

Dashed borders are created by using the border-style property and setting its value to dashed. Here's an example:

.txtdiv{
  padding: 10px;
  border: 1px dashed green;
}

This will create a 1-pixel dashed border that is green in color. Again, you can change the width, color, and other properties as needed.

Creating Mixed Borders

You can also create mixed borders that combine dotted and dashed lines. Below is an example:

.txtdiv{
  padding: 10px;
  border: 1px dashed green;
  border-top-style: dotted;
  border-top-width: 2px;
}

This will create a 1-pixel dashed border that is colored green, but the top border will be a dotted line.

In these examples, we have only demonstrated an all-sides border. You may choose to have only the top, bottom, left, or right border instead of all sides. In such a case, use the border-top, border-bottom, border-left, or border-right respectively in place of the border property.

Conclusion

Creating dotted and dashed borders in CSS is easy and can add a unique look to your website. By using the border-style property, you can create dotted and dashed lines, and by using other properties such as border-spacing and border-image, you can customize the look of the border even further. Experiment with different styles and widths to find the perfect look for your website.