CSS OUTLINE

Outlines Vs Borders

The outlines are generally used to highlight elements. An outline at a glance looks very similar to the border, but it differs from border in the following ways:

  • Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements on the page.
  • Unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
  • Outlines don’t have any impact on surrounding elements apart from overlapping.
  • Unlike borders, outlines don’t change the size or position of the element.
  • Outlines may be non-rectangular.

The outline-width Property

The outline-width property specifies the width of the outline to be added on an element. Its value should be, a CSS length (pxptem, and so on) or one of the allowed keywords, but percentage or negative values are not allowed. Just like the border-width property.

EXAMPLE

1.	p {
2.	    outline-width: thick;
3.	}

The outline-style Property

The outline-style property sets the style for an outline such as: soliddotted, etc.

This property may take one of the following values: nonehiddendasheddotteddoublegrooveinsetoutsetridge and solid. Just like border-style property.

none: Defines no outline.

hidden: Defines hidden outline.

dotted: Defines a dotted outline

dashed: Defines a dashed outline

solid: Defines a solid outline

double: Defines two outlines. The width of the two outlines are same as the outline-width value

groove: Defines a 3D grooved outline. The effect depends on the outline-color value

ridge: Defines a 3D ridged outline. The effect depends on the outline-color value

inset: Defines a 3D inset outline. The effect depends on the outline-color value

outset: Defines a 3D outset outline. The effect depends on the outline-color value

EXAMPLE

1.	p {
2.	    outline-style: double;
3.	}

The outline-color Property

The outline-color property sets the color of an outline.

EXAMPLE

1.	p {
2.	    outline-style: solid;
3.	    outline-color: #0000ff;
4.	}

You can also set the outline-color to transparent.

The outline Shorthand Property

The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-styleoutline-width and outline-color in a single rule.

EXAMPLE

1.	p {
2.	    outline: 5px solid #9acd32;
3.	}

If the value for an individual outline property is omitted or not specified while setting the outline shorthand property, the default value for that property will be used instead, if any.

In the example below, the outline will be a solid black line of 5px width:

EXAMPLE

1.	p {
2.	    color: black;
3.	    outline: 5px solid;
4.	}

But, in the case of outline-style, omitting the value will cause no outline to show at all, because the default value for outline-style property is none.

In the example below, there will be no outline:

EXAMPLE

1.	p {
2.	    outline: 5px #00ff00;
3.	}

Removing Dotted Line Around Active Links

The outline property is widely used to remove the dotted line around active links.

EXAMPLE

1.	a, a:acive, a:focus {
2.	    outline: none; /* Works in Firefox, Chrome, IE8 and above */
3.	}
Categories: CSS