{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Outline Properties Tutorials

CSS outline properties allow you to specify the style, color and width of an outline.

An outline is a line that is placed around HTML elements, outside of the border, and does not take up any space.

The major difference between an outline and a border, besides the placement of the 2, is that an outline does not take up any space. It does not change the size or position of the HTML element which it surrounds.

For example, if an outline is placed around an HTML element, the width, height and positioning of the HTML element does not change. If a border with a width of 4 pixels is placed around an HTML element with a given width of 50 pixels and a height of 50 pixels, the width of the HTML element would be 58 pixels and height of the HTML element would also be 58 pixels.

NOTE: Internet Explorer 8 (and higher) supports the outline property if a !DOCTYPE is specified.

CSS Outline Properties

The CSS outline properties are listed below.

Property Description Values CSS level
outline Sets all of the outline properties in one declaration outline-color
outline-style
outline-width
inherit 		CSS level 2
outline-color Sets the color of an outline color name
hex number
RGB number
invert
inherit 		CSS level 2
outline-style Sets the style of an outline none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit 		CSS level 2
outline-width Sets the width of an outline thin
medium
thick
length
inherit 		CSS level 2

How To Set the Style of an Outline

The code example below shows you how to set the style of an outline.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { border:1px solid red; } p.dotted { outline-style:dotted; } p.solid { outline-style:solid; } p.double { outline-style:double; } </style> <body> <p> This is a paragraph with a red border. </p> <p class="dotted"> This is a paragraph with a red border and an outline with a style of dotted. </p> <p class="solid"> This is a paragraph with a red border and an outline with a style of solid. </p> <p class="double"> This is a paragraph with a red border and an outline with a style of double. </p> </body> </html>

The web page that the code example creates is here: CSS outline Properties Example.

How To Set the Color of an Outline

The code example below shows you how to set the color of an outline.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { border:1px solid red; } p.black { outline-style:solid; outline-color:black; } p.blue { outline-style:solid; outline-color:blue; } </style> <body> <p> This is a paragraph with a red border. </p> <p class="black"> This is a paragraph with a red border and an outline with a color of black. </p> <p class="blue"> This is a paragraph with a red border and an outline with a color of blue. </p> </body> </html>

The web page that the code example creates is here: CSS outline Properties Example.

How To Set the Width of an Outline

The code example below shows you how to set the width of an outline.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { border:1px solid red; } p.thin { outline-style:solid; outline-width:thin; } p.thick { outline-style:solid; outline-width:thick; } </style> <body> <p> This is a paragraph with a red border. </p> <p class="thin"> This is a paragraph with a red border and an outline with a thin border. </p> <p class="thick"> This is a paragraph with a red border and an outline with a thick border. </p> </body> </html>

The web page that the code example creates is here: CSS outline Properties Example.

How To Set all of the Outline Properties in One Declaration

The code example below shows you how to set all of the outline properties in one declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { border:1px solid red; } p.all { outline:black dotted 10px; } </style> <body> <p> This is a paragraph with a red border. </p> <p class="all"> This is a paragraph with a red border and an outline with a color of black, a style of dotted and width of 10 pixels. </p> </body> </html>

The web page that the code example creates is here: CSS outline Properties Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends