Suscriber with us



Receive HTML?

Syndicate

CSS Outline PDF Print E-mail

The CSS outline properties is second-hand to draw a line around an element, outside the border edge.

CSS Outline Properties

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out".

The CSS outline properties sets the outlines around elements. You can identify the style, color, and width of the outline.

How to set the style of an outline?

<!-- created by phpguru.biz --> 
p
{
border: red solid thin;
}
p.dotted {outline-style: double}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}

<!-- created by phpguru.biz -->

How to set the color of an outline?

<!-- created by phpguru.biz --> 
p
{
border: red solid thin;
outline-style: solid;
outline-color: #00ff00
}

<!-- created by phpguru.biz -->

Note: Outlines do not take up space, and they do not have to be rectangular.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

PHPGURU: The number in the "PHPGURU" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

 PropertyDescriptionValuesIEFNPHPGURU

 outline

A shorthand property for setting all the outline properties in one declaration

outline-color
outline-style
outline-width

 -

 1.5

 -

 2

 outline-color

Sets the color of the outline around an element

color
invert

1.5

 outline-style

Sets the style of the outline around an element

none
dotted
dashed
solid
double
groove
ridge
inset
outset

1.5

 outline-width

Sets the width of the outline around an element

thin
medium
thick
length

1.5

Examples

Draw a line around an element (outline) (does not work in IE)
This example demonstrates how to draw a line around an element, outside the border edge.

Set the style of an outline (does not work in IE)
This example demonstrates how to set the style of an outline.

Set the color of an outline (does not work in IE)
This example demonstrates how to set the color of an outline.

Set the width of an outline (does not work in IE)
This example demonstrates how to set the width of an outline.





Digg!Del.icio.us!Google!Live!Facebook!Slashdot!Technorati!StumbleUpon!Newsvine!Yahoo!Free social bookmarking plugins and extensions for Joomla! websites!
Last Updated ( Monday, 17 March 2008 )
 
< Prev   Next >

CSS Examples

Examples

Polls

Which is the best Scripting language?