CSS Outline Shorthand

CSS Outline Shorthand

As per now we were writing css outline properties separately for

color,
width, and
Style

Which was taking many lines and more time-consuming.

But through the CSS outline property, we can do that all in one line.

Note -

CSS shorthand properties are recommended when you have a grip on other outline properties as well.

Outline property order does not matter.

Syntax -

outline : value1 value2 value3;

Now we will see Example -

Example -

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.p1{
outline:solid;
}
.p2{
outline: dotted palevioletred thick;
}
.p3{
outline: 8px solid rgb(0, 153, 255) ;
}
.p4{
outline: thick ridge rgb(248, 17, 152);
}

</Style>
<link rel="stylesheet" href="sample.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="p1">this is a pera</p>
<p class="p2">this is a pera</p>
<p class="p3">this is a pera</p>
<p class="p4">this is a pera</p>
</body>
</html>

Output -