Outlines are an alternative to borders.
An outline is a line drawn around elements outside the borders.
+-------------------------------------+ | Outline | | +-----------------------------+ | | |Border | | | | +--------------------+ | | | | |Padding | | | | | | +--------------+ | | | | | | |Content | | | | | | | | | | | | | | | +--------------+ | | | | | | | | | | | +--------------------+ | | | | | | | +-----------------------------+ | | | +-------------------------------------+
We can style outline with style, color, and width.
The outline property is different from
the border property: outline is not a part of an element's
dimensions, the element's total width and height is not affected by the width of the outline.
The outlines are not considered to be part of the page, and so do not cause the page layout to be adjusted when you apply them.
The following list describes the elements that relate to outlines.
The outline-style property specifies the style of an outline.
The following table lists the possible values for outline-style.
| Value | Description |
|---|---|
| none | no outline. This is default |
| hidden | a hidden outline |
| dotted | a dotted outline |
| dashed | a dashed outline |
| solid | a solid outline |
| double | a double outliner |
| groove | a 3D grooved outline. The effect depends on the outline-color value |
| ridge | a 3D ridged outline. The effect depends on the outline-color value |
| inset | a 3D inset outline. The effect depends on the outline-color value |
| outset | a 3D outset outline. The effect depends on the outline-color value |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
IE8 supports the outline properties only if a !DOCTYPE is specified.
The following code shows how to use the outline-style.
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
The outline-color property sets the color of an outline.
p {
outline-style: dotted;
outline-color: #00ff00;
}
The outline-width sets the width of an outline.
| Value | Description |
|---|---|
| medium | a medium outline. This is default |
| thin | a thin outline |
| thick | a thick outline |
| length | Allows you to define the thickness of the outline |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The following code sets the outline width.
p {
outline-style: dotted;
outline-width: 5px;
}
The outline shorthand property
sets all the outline properties in one declaration.
The shorthand property has the following syntax:
outline: outline-color, outline-style, outline-width
<!DOCTYPE html>
<html>
<head>
<style>
p {<!--from www. j a v a 2 s .c o m-->
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>This is a test</p>
</body>
</html>| Property | Description | CSS |
|---|---|---|
| outline-color | Set the outline color | 3 |
| outline-offset | Set the outline offset | 3 |
| outline-style | Set the outline style | 3 |
| outline-width | Set outline width | 3 |
| outline | Shorthand property for outline | 3 |