CSS3 Examples

CSS OUTLINE-STYLE

Written by jon on 8:40 AM The ‘outline-style’ property specifies an outline line style for the current element.
The outline properties create a uniform line around an object in order to draw visual attention. An outline is slightly different than a border in several ways: An outline is drawn starting “just outside the border edge” and is allowed to be non-rectangular. Outlines are always rendered on TOP of an element’s rendering box and do not influence the box’s position or size calculation; the document does not need to be re-flowed when a border is rendered or hidden, but the outline may overlap other nearby elements.

Example

button { outline-style: ridge } <button style=”outline-style: groove”>Press Me!</button>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent none No outline is rendered. This overrides any value of ‘outline-width', if present dotted The outline is rendered as a series of dots dashed The outline is rendered as a series of short lines solid Renders a solid line for the outline groove Creates the effect of the outline being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property ridge Creates the effect of the outline being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property inset Creates the effect of the outline being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove' outset Creates the effect of the outline coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge' double A double line outline is drawn on top of the element. The two lines with the space between adds up to the value of the ‘outline-width' property