Outline Style Explain
The outline-style property specifies the style of the outline.
The outline-style property can have one of the following values:
dotted - Defines a dotted outlinedashed - Defines a dashed outlinesolid - Defines a solid outlinedouble - Defines a double outlinegroove - Defines a 3D grooved outline. The effect depends on the outline-color valueridge - Defines a 3D ridged outline. The effect depends on the outline-color valueinset - Defines a 3D inset outline. The effect depends on the outline-color valueoutset - Defines a 3D outset outline. The effect depends on the outline-color valuenone - Defines no outlinehidden - Defines a hidden outline
The following example first sets a thin black border around each <p> element, then it shows the different outline-style values.
Html Code:outline-style property specifies the style of the outline.outline-style property can have one of the following values:dotted - Defines a dotted outlinedashed - Defines a dashed outlinesolid - Defines a solid outlinedouble - Defines a double outlinegroove - Defines a 3D grooved outline. The effect depends on the outline-color valueridge - Defines a 3D ridged outline. The effect depends on the outline-color valueinset - Defines a 3D inset outline. The effect depends on the outline-color valueoutset - Defines a 3D outset outline. The effect depends on the outline-color valuenone - Defines no outlinehidden - Defines a hidden outlineoutline-style values.<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
outline-color:red;
}
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;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.
</body>
</html>
Html Code Result:
Post a Comment