HI WELCOME TO KANSIRIS

CSS Outline Property - outline-color, outline-width, outline-style

CSS Outline property use to set outline (border outside area call outline) style for specific element. You can set outline color, width to decorate the style.

CSS outline-color, outline-width, outline-style

PropertiesValueDescription
outline-colorColor name: orange
Hexa code: #FFA500
RGB: rgb(255, 165, 0)		Set outline color.
outline-widthWidth in pixel: 5px
Width in percentage: 5%
Width set auto: auto		set the outline width size.
outline-stylesolid
dotted
dashed
double
groove
ridge
inset
outset
inherit
none		set the outline style.
Example
<!DOCTYPE html>
<html>
<head>
  <title>CSS outline property</title>
  <style type="text/css">
    p.first {
      outline-style: solid;
      outline-width: 2px;
      outline-color: orange;
    }
  </style>
</head>
<body>
  <p class="first">This element set outline property that change outline color, outline width, outline style of this element.</p>
</body>
</html>

CSS outline-style property

Here some possible outline style value help to decorate element.
Example
<!DOCTYPE html>
<html>
<head>
  <title>CSS outline property</title>
</head>
<body>
  <p style="border: 1px solid orange; outline-style: solid">This element outline style solid.</p>
  <p style="border: 1px solid orange; outline-style: dotted">This element outline style dotted.</p>
  <p style="border: 1px solid orange; outline-style: dashed">This element outline style dashed.</p>
  <p style="border: 1px solid orange; outline-style: double">This element outline style double.</p>
  <p style="border: 1px solid orange; outline-style: groove">This element outline style groove.</p>
  <p style="border: 1px solid orange; outline-style: inset">This element outline style inset.</p>
  <p style="border: 1px solid orange; outline-style: outset">This element outline style outset.</p>
</body>
</html>