outline-offset - HTML CSS CSS Property

HTML CSS examples for CSS Property:outline-offset

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. outline-offset

Description

The outline-offset CSS property sets the space between an outline and the border edge or simply edge of an element.

The following table summarizes the outline-offset Property.

Item Value
Default value: 0
Applies to:All elements
Inherited: No
Animatable: yes.

Syntax

The syntax of the property is as follows: 


outline-offset:     length | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the distance the outline from the border edge. The default value is 0. Negative values place the outline inside the element.
initial Sets this property to its default value.
inherit take the value of its parent element outline-offset property.

The example below shows the outline-offset property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 outline-offset Property</title>
  <style type="text/css">
  p {<!--from   ww  w  .j  a v a2s . c  om-->
    margin: 20px;
    padding: 20px;
    border: 2px solid red;
    outline: 2px solid green;
    outline-offset: 10px;
  }
</style>
 </head>
 <body>
  <p>The outline of this paragraph is offset from the border.</p>
 </body>
</html>

Related Tutorials