CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference


CSS Outline Property - CSS outline-color, outline-width, outline-style


CSS Outline property use to set outline (border outside area call outline) style for specific element. You can set outline color, width to decorate the style.


CSS outline-color, outline-width, outline-style

Property Value Description
outline-color Color Name: orange
Color Hexadecimal Code: #FFA500
Color RGB: rgb(255, 165, 0)
Set outline color.
outline-width Width in pixel: 5px
Width in percentage: 5%
Width set auto: auto
set the outline width size.
outline-style solid
dotted
dashed
double
groove
ridge
inset
outset
inherit
none
set the outline style.

Example Code:

<body>
	<p style="outline-style:solid;outline-width:2px;outline-color:orange;">This Paragraph is 
	example of the outline properties of CSS style can change a outline color, outline width or outline style.</p>
</body>

Run it...   »

Example Result:

This Paragraph is example of the outline properties of CSS style can change a outline color, outline width or outline style.

CSS outline-style property

Here some possible outline style value help to decorate element.

Example Code:

<body>
	<p style="border:1px solid orange;outline-style:solid">outline style solid.</p>
	<p style="border:1px solid orange;outline-style:dotted">outline style dotted.</p>
	<p style="border:1px solid orange;outline-style:dashed">outline style dashed.</p>
	<p style="border:1px solid orange;outline-style:double">outline style double.</p>
	<p style="border:1px solid orange;outline-style:groove">outline style groove.</p>
	<p style="border:1px solid orange;outline-style:inset">outline style inset.</p>
	<p style="border:1px solid orange;outline-style:outset">outline style outset.</p>
</body>

Run it...   »

Example Result:

outline style is solid.


outline style is dotted.


outline style is dashed.


outline style is double.


outline style is groove.


outline style is inset.


outline style is outset.