outline - HTML CSS CSS Property

HTML CSS examples for CSS Property:outline

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

Description

The outline property sets the width, style, and color for all four sides of an element's outline.

It is a shorthand property for setting the individual outline properties:

  • outline-width
  • outline-style
  • outline-color

The following table summarizes the outline Property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: No
Animatable: Yes, as some of the properties of the shorthand are animatable.

Syntax

The syntax of the property is as follows: 


outline:      [ outline-width outline-style outline-color ] | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
outline-width Sets the width of the outline.
outline-style Sets the line style of the outline.
outline-color Sets the color of the outline.
initial Sets this property to its default value.
inherit take the value of its parent element outline property.

The example below shows the outline property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS outline property</title>
  <style type="text/css">
        p.one {<!--from www.  jav  a  2  s. c om-->
          outline: 5px solid #ff0000;
    }
    p.two {
      color: #00ff00;
      outline: 5px solid;
    }
    </style>
 </head>
 <body>
  <p class="one">This is a paragraph.</p>
  <p class="two">This is another paragraph.</p>
 </body>
</html>

Related Tutorials