CSS Outline:-

The outline is a line that draws outside the border of the element.



<!DOCTYPE html>

<html>

<head>

<style>

p {border: 2px solid black;

padding: 20px;

margin: auto;

outline: #4CAF50 solid 10px;

text-align: center;

}

</style>

</head>

<body>

<h1> CSS Outline </h1>

<p> This element has a 2px solid black border and a green outline with a width of 10px, </p>

</body>

</html>

Try this code for a better experience 



CSS Outline:-

The outline is a line that is drawn outside the border around the element to make the element stand out.

In CSS there are many outline properties which are given below:

  • outline - style
  • outline-color
  • outline - width
  • outline - offset
  • outline

NOTE:- Outline is different from the border, not the border, an outline drowns outside the element of the border, and maybe the outline overlaps the other content. And also the outline not is part of the dimensions of the elements, the element's total height, and width will not affect the width of the outline. 

CSS Outline Style:-

The outline style property basically presents the style of the outline. The outline style property can be one of the below:

  • dotted - The dotted property defines the dotted outline.
  • dashed - The dashed property defines the dashed outline.
  • solid - The solid property defines the solid outline.
  • double - The double property defines the double outline.
  • groove - The groove property defines the 3D groove outline.
  • ridge - The ridge property defines the 3D ridge outline.
  • inset - The inset property defines the 3D inset outline.
  • outset - The outset property defines the 3D outset outline.
  • none - The none property defines the no outline.
  • hidden - The hidden property defines the hidden outline.

The given example shows the different outline style values:



<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid {outline-style: solid;}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

<h1> CSS Outline Style Properties </h1>

<p class="dotted"> This is a dotted outline.</p>

<p class="dashed"> This is a dashed outline.</p>

<p class="solid"> This is a solid outline.</p>

<p class="double"> This is a double outline.</p>

<p class="groove"> This is a groove outline. The effect depends on the outline color value.</p>

<p class="ridge"> This is a ridge outline. The effect depends on the outline color value.</p>

<p class="inset"> This is a inset outline. The effect depends on the outline color value.</p>

<p class="outset"> This is a outset outline. The effect depends on the outline color value.</p>

</body>

</html>

Try this code for a better experience