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 |
Leave a Reply