CSS Outline

Home / CSS / CSS Outline

CSS Outline

CSS Outline:

An outline is a line drawn outside the element's border.

The outline-style property specifies the style of the outline, and can have one of the following values:

  • dotted - Defines a dotted outline
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline
  • double - Defines a double outline
  • groove - Defines a 3D grooved outline
  • ridge - Defines a 3D ridged outline
  • inset - Defines a 3D inset outline
  • outset - Defines a 3D outset outline
  • none - Defines no outline
  • hidden - Defines a hidden outline
CSS-Outline Shorthand:- outline: 2px solid red;

Example:

 
<style>
    .box1{
      height: 100px;
      width: 100px;
      background-color: blue;
      outline: 2px solid red;
    }   
  </style>
</head>
<body>
  <div class="box1">
  </div>  
</body>

Output: