Home » CSS

Set outline style as a dotted line with CSS

In this tutorial, we will learn how to set outline style as a dotted line with CSS? By Shahnail Khan Last updated : July 12, 2023

How to set outline style as a dotted line with CSS?

Defining outlines around an element makes our website captivating. We apply CSS outline properties to customize outlines. The CSS outline property is a shorthand property for outline-style, outline-width and outline-color, which specifies the style of the outline. This property has some predefined values which serve different purposes. Let's see which value can be entered to set the outline style of an element as a dotted line with CSS.

We set the value of outline- style to dotted to define dotted line around an element.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS outline</title>
   </head>
   
   <style>
      body {
      margin-right: 500px;
      }
      .container {
      border: 2px solid black;
      background-color: yellowgreen;
      }
      .main {
      outline-style: dotted;
      background-color: beige;
      }
   </style>
   
   <body>
      <div class="container">
         <h2>This element has only borders.</h2>
      </div>
      <div class="main">
         <h2>This element has dotted outline.</h2>
      </div>
   </body>
</html>

Output

Set outline style as a dotted line with CSS | Example

We have created two div classes, namely, container and main. In container class, we have defined borders around its element. In the main class, we have defined a dotted outline around its element.

CSS Examples »

Set the left, right, top and bottom padding of an element

How to change the cursor into a hand when a user hovers over a list item?