CSS outline shorthand:-

CSS Outline Shorthand Property:-

If you want to use the following individual outline property then you have to use the CSS outline shorthand property:

  • outline width
  • outline color
  • outline style (required)

We can specify one, two, or three values from the above list for the CSS online property. The order of the outline value does not matter we can use anyone.

In the following example, we will show some outlines specified with the help of the CSS shorthand property :



<!DOCTYPE html>

<html>

<head>

<style>

p.exp1 {outline: dashed;}

p.exp2 {outline: dotted red;}

p.exp3 {outline: 4px solid green;}

p.exp4 {outline: thick ridge pink;}

</style>

</head>

<body>

<h1> CSS Outline Property </h1>

<p class="exp1"> A dashed outline </p>

<p class="exp2"> A dotted red outline </p>

<p class="exp3"> A 4px solid gree outline </p>

<p class="exp4"> A thick ridge pink outline </p>

</body>

</html>

Try this code for a better experience