html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS outline-style property

Definition

The CSS outline-style specifies the outline style for an element.

Applies To

All elements.

Property Values

outline-style - Defines a style for the outline.

Valid values for outline-style keywords are none, dotted, dashed, double, groove, inset, outset, ridge and solid.

inherit - The outline-style properties are inherited from the parent element.

Default Value

Default value of outline-style is none.

Inheritance

The outline-style property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

The look of the different outline styles varies greatly from browser to browser.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS outline-style property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS outline-style Property</title>

<!-- Valid values for CSS outline-style Property are:
	
	border-style (none, dotted, dashed, double, 
	groove, inset, outset, ridge  and solid) and inherit. 
	
--> 

<style type="text/css">
/* Set a border and padding around images to see the 
   effects of changing the outline styles */
img {
	padding: 10px;
	border: 6px solid yellow;
	outline: 4px solid red;
}
/* Outline set to inset */
#img1 {
	outline-style: inset;
}
/* Outline set to groove */ 
#img2 {
	outline-style: groove;
}
</style>
</head>

<body>
<h1>Looking at the CSS outline-style Property</h1>
<p>Outline style of inset.
<img id="img1" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />
</p>
<p>Outline style of groove.
<img id="img2" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />
</p>
</body>
</html>

How It Looks

The results of using the outline-style property with the values above will look something like the following:

notepad
CSS outline-color    << Prev          Next >>   CSS outline-width

go to home page Homepage go to top of page Top


CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.