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.



Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

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