outline-style
Definition
The outline-style property specifies the line style of the element's outline. An outline is similar to a border except that it is rendered over the element's box model so it does not affect the width or height used by the element. One useful application of outline, seen below, is to show which form control currently has focus.
The following screen shot shows some outline styles rendered by a Web browser.
Example
input:focus, select:focus, textarea:focus {outline-size: 2px;outline-style: dotted;outline-color: blue;}
Characteristics
Possible values
The following values are possible for the line style of an element's outline:
none- No outline.
hidden- As for
none, the result is no outline. dotted- The outline is a series of dots.
dashed- The outline is a series of short line segments.
solid- The outline is a single line segment.
double- The outline is made up of two solid lines.
groove- The outline looks as though it were carved into the background.
ridge- The opposite of
groove: the outline looks as though it were rising out of the background. inset- The outline makes the box look as though it were embedded in the background.
outset- The opposite of
inset: the outline makes the box look as though it were rising out of the background. inherit- Use the same computed value as the parent element for this property.
Default value
none
Applies to
All elements
Inherited
No
See also