CSS Outlines property is used to apply color, style and width on extra border around an element.
There are four type of Outline property as below.
- outline : It is used to set all the below three properties in a single statement.
- outline-color : It is used to set the color of the outline.
- outline-style : It is used to set the line style of the outline. The value of outline-style are dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid.
- outline-width : It is used to set the width of the outline. There are three value like thin, medium, or thick.
Syntax :
outline:dashed #333333 medium;
outline-color:#333333;
outline-style:double;
outline-width:thick;
Example :
<html>
<head>
<title>Learn Css outline tutorials by aryatechno</title>
</head>
<body>
<p style="outline:dashed #FF0000 medium;">outline property with color, width and style.</p>
<p style="outline-color:#333333; outline:groove;">outline-color property with color.</p>
<p style="outline-style:double;">outline-style property is used to set double border.</p>
<p style="outline-width:thick;outline:dotted">outline-width property is used to set thick outline border.</p>
</body>
</html>
Output :
outline property with color, width and style.
outline-color property with color.
outline-style property is used to set double border.
outline-width property is used to set thick outline border.
Comments