CSS Outlines

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.

  1. outline : It is used to set all the below three properties in a single statement.
  2. outline-color : It is used to set the color of the outline.
  3. 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.
  4. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

52398