CSS outline, outline-color, outline-style and outline-width properties.
Possible Values
For values see individual outline property pages:
The outline property is used to place an outline around an element. Outlines are drawn just outside the border edge of a box and differ from borders in some important ways:
- They draw a continuous line with no breaks around an element.
- An outline doesn't have to be a rectangle or even a regular shape - irregular image maps can be given an outline.
- An outline is drawn over the element, on top of other content and as such takes up no space in the box model which means it may obscur other content which is part of the normal flow of the document.
The outline property is a shorthand property for setting the colour, style and width of the outline around an element, the other three setting the individual values.
Outline-style takes the same values as the border-style property, apart from hidden which is not allowed and it's initial value is none.
Outline-width takes the same values as the border-width property but has an initial default value of medium
Outlines can be used to highlight a particular element on a page such as a form button or an image map, they can also be applied dynamically to elements by using pseudo classes such as :focus or :hover. As outlines are outside the box model using them dynamically doesn't cause the page to reload or the other content to reflow.
Here are some examples of the application of the outline properties:
NOTE: none of the outline properties are supported by IE7 or IE6 and IE8 only recognizes outlines if a valid <!DOCTYPE> is used.