outline

Overview

W3C

Properties

background

background-attachment

The outline property is a shorthand property for setting the color, style, and width of an element's outline.

CSS2

Syntax
Example | color | color
Example | color | invert
Example | style | dashed
Example | style | dotted
Example | style | double
Example | style | groove
Example | style | hidden
Example | style | inset
Example | style | none
Example | style | outset
Example | style | ridge
Example | style | solid
Example | width | length
Example | width | medium
Example | width | thick
Example | width | thin
Example | DOM
Reference

CSS


                                outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit

DOM


                                [window.]document.getElementById("element-id").style.outline = "outline-color outline-style outline-width";

Initial:	value of the color property, none, medium
Applies To:	all elements
Inherited:	no
Percentages:	NA
Media:	visual, interactive

<html>
  <head>
    <title>outline</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">color</a>
    <a href="/" onmouseover="mouseover2();">invert</a><br>
    <a href="/" onmouseover="mouseover3();">none</a>
    <a href="/" onmouseover="mouseover4();">hidden</a>
    <a href="/" onmouseover="mouseover5();">dotted</a>
    <a href="/" onmouseover="mouseover6();">dashed</a>
    <a href="/" onmouseover="mouseover7();">solid</a>
    <a href="/" onmouseover="mouseover8();">double</a>
    <a href="/" onmouseover="mouseover9();">groove</a>
    <a href="/" onmouseover="mouseover10();">ridge</a>
    <a href="/" onmouseover="mouseover11();">inset</a>
    <a href="/" onmouseover="mouseover12();">outset</a><br>
    <a href="/" onmouseover="mouseover13();">thin</a>
    <a href="/" onmouseover="mouseover14();">medium</a>
    <a href="/" onmouseover="mouseover15();">thick</a>
    <a href="/" onmouseover="mouseover16();">length</a>
    <h1 id="id1">Outline</h1>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.outline = "red solid";
    }
    function mouseover2() {
      document.getElementById("id1").style.outline = "invert solid";
    }
    function mouseover3() {
      document.getElementById("id1").style.outline = "none";
    }
    function mouseover4() {
      document.getElementById("id1").style.outline = "hidden";
    }
    function mouseover5() {
      document.getElementById("id1").style.outline = "dotted";
    }
    function mouseover6() {
      document.getElementById("id1").style.outline = "dashed";
    }
    function mouseover7() {
      document.getElementById("id1").style.outline = "solid";
    }
    function mouseover8() {
      document.getElementById("id1").style.outline = "double";
    }
    function mouseover9() {
      document.getElementById("id1").style.outline = "groove";
    }
    function mouseover10() {
      document.getElementById("id1").style.outline = "ridge";
    }
    function mouseover11() {
      document.getElementById("id1").style.outline = "inset";
    }
    function mouseover12() {
      document.getElementById("id1").style.outline = "outset";
    }
    function mouseover13() {
      document.getElementById("id1").style.outline = "solid thin";
    }
    function mouseover14() {
      document.getElementById("id1").style.outline = "solid medium";
    }
    function mouseover15() {
      document.getElementById("id1").style.outline = "solid thick";
    }
    function mouseover16() {
      document.getElementById("id1").style.outline = "solid 1px";
    }
    document.getElementById("id1").style.margin = "5px";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Syntax

Example | color | color

Example | color | invert

Example | style | dashed

Example | style | dotted

Example | style | double

Example | style | groove

Example | style | hidden

Example | style | inset

Example | style | none

Example | style | outset

Example | style | ridge

Example | style | solid

Example | width | length

Example | width | medium

Example | width | thick

Example | width | thin

Example | DOM

Reference