CSS Outline Property

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

Properties Value Description
outline-color Color name: orange
Hexa code: #FFA500
RGB: rgb(255, 165, 0)		 Set outline color.
outline-width Width in pixel: 5px
Width in percentage: 5%
Width set auto: auto		 set the outline width size.
outline-style solid
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>

Run it...   »

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>

Run it...   »