Set outline style as a dotted line with CSS

Learn how to set outline style as a dotted line with CSS?
Submitted by Shahnail Khan, on March 20, 2022

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.


<!DOCTYPE html>
<html lang="en">
      <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>
      body {
      margin-right: 500px;
      .container {
      border: 2px solid black;
      background-color: yellowgreen;
      .main {
      outline-style: dotted;
      background-color: beige;
      <div class="container">
         <h2>This element has only borders.</h2>
      <div class="main">
         <h2>This element has dotted outline.</h2>


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 Tutorial & Examples »


Comments and Discussions!


Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© some rights reserved.