Did you find this useful?
Socialize it today.

CSS Outline

Thursday, March 22, 2012

tags CSS

The CSS outline property seems to perform the same function as border, but the outline and border properties do have differences. The main difference between the two properties is that the outline does not take up any space as does the border property. When an outline is placed around an element, it does not affect how the element is placed on the page. The size or position of the element is not changed. If you add an outline on an element, it will take up the same amount of space as if the element did not have an outline. The border on the other hand, the border property does add to the overall size of the element.

Outline Property (Shorthand)

When using the shorthand outline property, you set all the outline properties in one declaration: outline-color, outline-style, and outline-width. The default value is "invert none medium".

p {outline: blue solid thin;}

Outline-color Property

The outline-color property can have one of three types of values: color, invert, or inherit. If you assign the value of invert, you get a color inversion. This ensures that the outline is visible, regardless of color background. This is default value. If you specify the value to be inherit, the outline color will be inherited from the parent element.

p {outline-color: #FF00FF;}

Outline-style Property

The outline-style property, like the border-style property, can have one of various values: none, hidden, solid, double, dotted, dashed, groove, inset, outset, ridge, and inherit.

p {outline-style: dotted;}

Outline-width Property

You can assign the outline-width property, like the border-width property, an exact value (5px, 1.25em, etc.), or general values such as thin, medium, or thick.

p {outline-width: thick;}

Here is an example of an element with a medium, solid blue border surrounded by a thick, dotted red outline.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.

Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor CSS: The Missing Manual