CSS Outline Shorthand
CSS Outline – Shorthand property
The outline property is a shorthand property for setting the accompanying individual outline properties:
- outline-width
- outline-style (required)
- outline-color
The outline property is specified as one, two, or three values from the list above. The order for the values doesn’t make any difference.
The accompanying example shows some outlines determined with the shorthand outline property:
The outline Property
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
