CSS OUTLINE SHORTHAND PROPERTY


We can define the outline property using shorthand method instead of declaring all properties individually. This makes the code shorter and cleaner.

Following individual outline properties can be declared via shorthand method:

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

The outline property can be specified as one, two or three values from the above list, irrespective of the order they are specified in.


For example:


<!DOCTYPE html>
<html>
<head>
<style>
p.o1 {outline: dashed;}
p.o2 {outline: dotted red;}
p.o3 {outline: 5px solid yellow;}
p.o4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="o1">A dashed outline.</p>
<p class="o2">A dotted red outline.</p>
<p class="o3">A 5px solid yellow outline.</p>
<p class="o4">A thick ridge pink outline.</p>
</body>
</html>
Live Demo!


Output:

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.



So in this manner, we can mention all the CSS outline properties with a single line of code!