Outline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Outline</title>
<style>
/* outline style, width & color */
.para1 {
background: cornflowerblue;
border: 4px solid indigo;
outline-style: dashed;
outline-width: 4px;
outline-color: brown;
}
/* outline shorthand representation */
.para2 {
background: beige;
border: 4px solid chocolate;
outline: 4px dotted orange;
}
/* outline-offset property is set */
.para3 {
background: lightpink;
outline: 4px solid black;
outline-offset: 3px;
}
</style>
</head>
<body>
<!--
outline is a line that is drawn around elements, OUTSIDE the borders, to make the element - stand out.
outline properties:
- outline-style : property specifies the style of the outline.
- outline-color : sets the color of an element's outline
- outline-width : sets the thickness of an element's outline
- outline-offset : adds space between an outline and edge/border of an element.
- outline : is a shorthand property for setting following individual outline properties:
outline-width
outline-style (required)
outline-color
-->
<h1>Demo: Outline</h1>
<h2>Demo outline style, width & color</h2>
<p class="para1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt inventore odit rerum exercitationem rem eos incidunt impedit reprehenderit molestiae. Molestias, accusamus magnam officiis numquam doloremque magni aspernatur. Atque, odio tempora.</p>
<h2>Demo outline shorthand representation</h2>
<p class="para2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt inventore odit rerum exercitationem rem eos incidunt impedit reprehenderit molestiae. Molestias, accusamus magnam officiis numquam doloremque magni aspernatur. Atque, odio tempora.</p>
<h2>Demo outline-offset</h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt inventore odit rerum exercitationem rem eos incidunt impedit reprehenderit molestiae. Molestias, accusamus magnam officiis numquam doloremque magni aspernatur. Atque, odio tempora.</p>
</body>
</html>
</body>
</html>